vue-router 导航守卫

前置守卫 router.beforeEach(to,from,next)

守卫方法接收三个参数：
to：即将要进入的目标路由对象
from：当前导航正要离开的路由
next：执行下一步

 /**
     * @param {to} 将要去的路由
     * @param {from} 出发的路由
     * @param {next} 执行下一步
     */
    router.beforeEach((to, from, next) => {
        document.title = to.meta.title || '卖座电影';
        if (to.meta.needLogin && !$store.state.isLogin) {
            next({
                path: '/login'
            })
        } else {
            next()
        }
    })

后置守卫 router.afterEach(to,from)

全局后置钩子与全局前置守卫类似，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身

router.afterEach((to, from) => {
      // ...
   })

组件内部守卫 beforeRouteEnter(to,from,next)

(进入beforeRouteEnter与离开beforeRouteLeave 再单独的组件中 例如Admin.vue中进行设置

 beforeRouteEnter: (to, from, next) => {
    next(vm => {
      alert("hello" + vm.name);
    });
  }

  beforeRouteLeave(to, from, next) {
    if (confirm("确定离开吗？") == true) {
      next();
    } else {
      next(false);
    }
  }

路由独享的守卫beforeEnter

使用方法与全局守卫相同

不同的是：全局守卫可以作用于全局，路由独享守卫只作用于被设置守卫的路由

//登录模块
        path: '/login',
        component: () => import('@/views/login'),
        beforeEnter: (to, from, next) => {
            if (to.meta.needLogin && !$store.state.isLogin) {
                next({
                    path: '/login'
                })
            } else {
                next()
            }
        }