vue-router 钩子函数 （beforeEach、afterEach、beforeEnter）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue-router 钩子函数 （beforeEach、afterEach、beforeEnter）相关的知识，希望对你有一定的参考价值。
参考技术A （一）全局的beforeEach：前置钩子函数
三个参数：
to ：路由将要跳转的路劲信息，信息是包含在对象里边的
from：路由跳转前的路由信息，也是一个对象的形式
next：路由的控制参数，常用的有next（true）和next（false）决定要不要跳转
使用场景：未登录去下单，跳转到登录页面
2.afterEach：后置钩子函数
两个参数：没有next
to：去哪
from：从哪里来
使用场景：改变浏览器title
（二）单个路由独享的
1.beforeEnter 有三个参数：
to：路由将要跳转的路劲信息，信息是包含在对象里边的
from：路由跳转前的路由信息，也是一个对象的形式
next：路由的控制参数，常用的有next（true）和next（false）
在路由配置文件（/src/router/index.js）中写钩子函数
（三）组件级的
1.beforeRouteEnter ： 在路由进入前的钩子函数 不能获取组件实例 ‘this’ 这时组件 this 还没有被创建
使用场景：进入这个路由前你要做什么初始化操作
2.beforeRouteUpdate ： 当前路由改变，改组件被复用时 可以访问组件 ‘this’
使用场景：对于一个带有动态路由参数的路径／box／：id ，在／box／b 和／box／c 之间跳转的时候由于会渲染同样的组件Box，因此组件实例会被复用，这个钩子函数在这种情况下会被调用
3.beforeRouteLeave ： 离开路由前的钩子函数，可以访问组件实例 ‘this’
使用场景：清除定时器等等
以上是关于vue-router 钩子函数 （beforeEach、afterEach、beforeEnter）的主要内容，如果未能解决你的问题，请参考以下文章