Vue 全家桶学习笔记 —— Vue Router 的进阶使用

Vue 全家桶学习笔记 —— Vue Router 的进阶使用

 

本篇文章是对 Vue Router 官方文档的总结，已经看过的小伙伴可以忽略，没看过的小伙伴可以看看哟，能省掉你看官方文档的时间。先贴上上一篇文章的地址

Vue 全家桶学习笔记 —— Vue Router 的基础使用

上一篇说完基础使用，本篇就来总结下进阶的使用方式

导航钩子

导航钩子的用处是为了方便我们在路由正在改变时做一些处理的，我们可以拦截下导航，并在做完我们的处理以后，选择继续完成跳转、取消跳转或者跳转到其他页面

对于导航钩子，有三种使用方法：全局、局部与组件内

全局钩子

// router 为上一篇文章中创建的 VueRouter 实例
router.beforeEach((to, from, next) => {
    console.log('hook 1')
    next() // 调用下一个钩子
})
router.beforeEach((to, from, next) => {
    console.log('hook 2')
    next() // 调用下一个钩子
})
router.beforeEach((to, from, next) => {
    console.log('hook 3')
    next() // 钩子全部执行结束，将要跳转到目标路由
})

beforeEach()方法接收三个参数，第一个to为即将导航到的路由对象，from为马上要离开的路由对象，而next是一个函数，用过 koa 的小伙伴对next一定都很熟悉，只有调用了这个方法，导航钩子才会继续往下执行，如果不调用则将会一直处于等待状态（不会被确认），不会跳转到下一个路由

上面的代码中，创建了三个导航钩子，它们会按照创建的先后顺序一次执行，但前提也是必须要调用next()，直到所有的钩子都执行完

需要说下的是，next()也可以传参

next() // 按顺序执行钩子，所有钩子都执行完后，跳转到目标路由
next(false) // 中断导航，并且将浏览器 url 重置为 from 对应的地址
next('/otherPage') next({path: '/otherPage'}) // 中断当前导航，执行新的导航，将会跳转到另一个地址

局部钩子

这个跟简单，只需要在每一个 route item 的配置对象上直接定义beforeEnter就可以，它的使用方式与全局的beforeEach一致

组件内钩子

const Side = {
    template: '...',
    beforeRouterEnter (to, from, next) {
      // 在进入该组件的对应路由被确认之前调用
      // 因为当前组件还没有创建，所以不能用 this 来获取组件实例
      // 但是可以在 next 中传入一个回调来访问组件实例
      next (vm => {...})
    },
    beforeRouteUpdate (to, from, next) {
      // 渲染了同样的组件，组件被复用时调用
    },
    beforeRouteLeave (to, from, next) {
      // 导航离开时调用
    }
}

路由元信息

我们可以为每个 route item 配置一个 meta 字段，这个字段是一个对象，我们可以将当前路由需要的一些信息作为一个对象赋值给这个字段

{
    ...,
    meta: {
      userRole: 1,
      requireAuth: true
    }
}

上面的元信息meta字段中，配置了两个属性，一个是用户角色userRole，另一个是是否需要身份验证requireAuth

那我们要如何获取这个meta字段呢？

首先需要明确的是，由于每一个 route 对象都能够嵌入子 route ，所以当匹配到一个 route 的时候，也会匹配到它下面的子 route，如果这些子 route 也有 meta 的话，就会有很多个元信息字段。我们可以通过route.matched属性来检测每一个 route 对象

滚动行为

在创建 VueRouter 实例时，出来routers参数，还可以配置一个 scrollBehavior方法

const router = new VueRouter({
    routes: [...],
    scrollBehavior (to, from, savedPosition) {
      ...
      return {
        x: 0,
        y: 0
      }
    }
})

scrollBehavior方法有 to 和 from 两个路有对象，与上文中的相同。而该方法需要返回一个需要滚动到的位置的信息对象，有下面两种形式

{x: 0, y: 0} // x y 为目标位置的坐标，数字类型
{selector: string} // string 为一个锚点，如 to.hash

入股返回一个假值或者空对象，就不会发生滚动

该方法的第三个参数记录了上一个页面的最后位置，但是只有在调用浏览器的前进后退按钮时才会生效