vue-router检漏笔记

今天针对vue-router官网进阶部分的知识点进行了检漏学习,里面有一些是之前不了解的(竟然还可以这么玩?),也有一些知识虽然之前了解,但是发现官网提供的例子真香,书写方式很高雅,所以记录一下。 一、导航守卫 二、路由元信息 三、基于路由的动态过渡 四、数据获取 五、滚动行为 六、路由懒加载 一、导航守卫 除了平时自己常用的全局前置守卫,还有单个路由独享、组件级的守卫。 1.全局前置守卫 const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... }) next: Function: 一定要调用该方法来 resolve 这个钩子。 next(): 进行管道中的下一个钩子。 next(false): 中断当前的导航。 next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。 next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。 2.全局后置钩子 你也可以注册全局后置钩子,然而和守卫不同的是,这些钩子不会接受 next 函数也不会改变导航本身: router.afterEach((to, from) => { // ... }) 3.路由独享的守卫 你可以在路由配置上直接定义 beforeEnter 守卫: const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ] }) 4.组件内的守卫 最后,你可以在路由组件内直接定义以下路由导航守卫: beforeRouteEnter beforeRouteUpdate (2.2 新增) beforeRouteLeave const Foo = { template: `...`, beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不!能!获取组件实例 `this` // 因为当守卫执行前,组件实例还没被创建 }, beforeRouteUpdate (to, from, next) { // 在当前路由改变,但是该组件被复用时调用 // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候, // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 可以访问组件实例 `this` }, beforeRouteLeave (to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this` } } beforeRouteEnter 守卫 不能 访问 this,因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。 不过,你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。 beforeRouteEnter (to, from, next) { next(vm => { // 通过 `vm` 访问组件实例 }) } 这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。 beforeRouteLeave (to, from, next) { const answer = window.confirm('Do you really want to leave? you have unsaved changes!') if (answer) { next() } else { next(false) } } 5.完整的导航解析流程 导航被触发。 在失活的组件里调用离开守卫。 调用全局的 beforeEach 守卫。 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。 在路由配置里调用 beforeEnter。 解析异步路由组件。 在被激活的组件里调用 beforeRouteEnter。 调用全局的 beforeResolve 守卫 (2.5+)。 导航被确认。 调用全局的 afterEach 钩子。 触发 DOM 更新。 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。 二、路由元信息 定义路由的时候可以配置 meta 字段: const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ { path: 'bar', component: Bar, // a meta field meta: { requiresAuth: true } } ] } ] }) 那么如何访问这个 meta 字段呢? 首先,我们称呼 routes 配置中的每个路由对象为 路由记录。路由记录可以是嵌套的,因此,当一个路由匹配成功后,他可能匹配多个路由记录 例如,根据上面的路由配置,/foo/bar 这个 URL 将会匹配父路由记录以及子路由记录。 一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象) 的 $route.matched 数组。因此,我们需要遍历 $route.matched 来检查路由记录中的 meta 字段。 下面例子展示在全局导航守卫中检查元字段: router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { // this route requires auth, check if logged in // if not, redirect to login page. if (!auth.loggedIn()) { next({ path: '/login', query: { redirect: to.fullPath } }) } else { next() } } else { next() // 确保一定要调用 next() } }) 三、基于路由的动态过渡 // 接着在父组件内 // watch $route 决定使用哪种过渡 watch: { '$route' (to, from) { const toDepth = to.path.split('/').length const fromDepth = from.path.split('/').length this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left' } } 查看完整例子请移步这里。 四、数据获取 有时候,进入某个路由后,需要从服务器获取数据。例如,在渲染用户信息时,你需要从服务器获取用户的数据。我们可以通过两种方式来实现: 导航完成之后获取:先完成导航,然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。 导航完成之前获取:导航完成前,在路由进入的守卫中获取数据,在数据获取成功后执行导航。 从技术角度讲,两种方式都不错 —— 就看你想要的用户体验是哪种。 五、滚动行为 对于所有路由导航,简单地让页面滚动到顶部: const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } } }) 模拟“滚动到锚点”的行为: scrollBehavior (to, from, savedPosition) { if (to.hash) { return { selector: to.hash } } } 六、路由懒加载 当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。 结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载。 首先,可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身): const Foo = () => Promise.resolve({ /* 组件定义对象 */ }) 第二,在 Webpack 2 中,我们可以使用动态 import语法来定义代码分块点(split point): import('./Foo.vue') // 返回 Promise 结合这两者,这就是如何定义一个能够被 Webpack 自动代码分割的异步组件。 const Foo = () => import('./Foo.vue') 在路由配置中什么都不需要改变,只需要像往常一样使用 Foo: const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ] }) 当使用局部注册的时候,你也可以直接提供一个返回 Promise 的函数: new Vue({ // ... components: { 'my-component': () => import('./my-async-component') } })

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):