本篇文章是对 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
入股返回一个假值或者空对象，就不会发生滚动
该方法的第三个参数记录了上一个页面的最后位置，但是只有在调用浏览器的前进后退按钮时才会生效
扫码关注前端周记公众号
网友评论