vue路由钩子函数：
路由的钩子函数总结有6个
全局的路由钩子函数：beforeEach、afterEach
单个的路由配置内使用的钩子函数：beforeEnter
组件内的路由钩子函数：beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate
所有钩子函数参数都为 (to,from,next)
to: (Route路由对象) 即将要进入的目标 路由对象 to对象下面的属性
from: (Route路由对象) 当前导航正要离开的路由
next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
应用场景：可进行一些页面跳转前处理，例如判断需要登录的页面进行拦截，做登录跳转！
router.beforeEach((to, from, next) => { if (to.meta.requireAuth) { //判断该路由是否需要登录权限 if (token) { //通过读取token，如果存在，name接下一步如果不存在，那跳转回登录页 next()//不要在next里面加"path:/",会陷入死循环 } else { next({ path: '/login', query: {redirect: to.fullPath}//将跳转的路由path作为参数，登录成功后跳转到该路由 }) } } else { next() } }) 路由独享的守卫(路由内部钩子)
在路由上直接配置 beforeEnter 守卫：
const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, // 这儿你可以使用路由懒加载引入 beforeEnter: (to, from, next) => { // } } ] 组件内的守卫(组件独享钩子)
1、beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不能！获取组件实例 this // 因为当钩子执行前，组件实例还没被创建 }, beforeRouteUpdate (to, from, next) { // 当转一个同一个页面中，当页面地址栏的参数发生变化时候，而数据并没有实时的进行更新，需要刷新页面才会显示新的数据，可通过to获取到路由的参数 // 可以访问组件实例 `this` }, beforeRouteLeave (to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 this } 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/221666.html原文链接：https://javaforall.net
