vue-router路由防卫

路由防卫

路由防卫用于通过路由跳转，或取消的方式守卫路由，如验证码。
路由导航有

• 全局的
• 单个路由独享的
• 组件级的

1.全局钩子

全局前置守卫beforEach()

项目加载后进入函数，用于登录权限管理较多，参数为一个回调函数
回调函数有三个参数

• to：即将要进入的目标路由对象
• from：当前导航正要离开的路由
• next：执行下一步
  next(true)继续执行
  next(false)或不写为终止执行
  next(path)跳转路由

    /**
     * @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()
        }
    })

全局后置钩子afterEach

很少使用，不用next参数，因为next也不会改变导航本身，全局结束。

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

2.路由独享的守卫beforeEnter

用法和全局路由相同，但只能守卫当前设置的路由

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

3.组件内路由

组件内路由和钩子函数等平等关系。

beforeRouterEnter

组件在confirm前调用，不能用this，因为没用实例化，可以通过next获取数据

beforeRouteUpdate

路由更新时调用

beforeRouteLeave

路由离开时调用，防止用户重要数据丢失。

4.返回上一级路由

      第一种：history.back();
      第二种：this.$router.go(-1);