vue路由守卫使用

vue路由钩子函数：

路由的钩子函数总结有6个

全局的路由钩子函数：beforeEach、afterEach

vue router.afterEach（全局后置守卫）
router.beforeEach 是页面加载之前，router.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
}