路由守卫

作者: Grayly吖 | 来源:发表于2019-05-12 22:27 被阅读182次

    路由守卫

          路由跳转前做一些验证,比如登录验证,是网站中的普遍需求。对此,vue-route 提供的 \color{red}{beforeRouteUpdate }可以方便地实现导航守卫(navigation-guards)。导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧。
    文档地址:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

    一、全局前置守卫\color{red}{beforeEach }

    • 守卫方法接收三个参数:
      • 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()
            }
        })
    

    二、全局后置钩子\color{red}{afterEach}(少用)

    • 全局后置钩子与全局前置守卫类似,然而和守卫不同的是,这些钩子不会接受 next 函数也不会改变导航本身
        router.afterEach((to, from) => {
          // ...
       })
    

    三、路由独享的守卫\color{red}{beforeEnter }

    • 使用方法与全局守卫相同
    • 不同的是:全局守卫可以作用于全局,路由独享守卫只作用于被设置守卫的路由
            //登录模块
            path: '/login',
            component: () => import('@/views/login'),
            beforeEnter: (to, from, next) => {
                if (to.meta.needLogin && !$store.state.isLogin) {
                    next({
                        path: '/login'
                    })
                } else {
                    next()
                }
            }
    

    四、组件内的守卫

    • 可以在路由组件内直接定义以下路由导航守卫:
    • (1)\color{red}{beforeRouteEnter}
      • 在渲染该组件的对应路由被 confirm 前调用
      • 不!能!获取组件实例 this,因为当守卫执行前,组件实例还没被创建
      • 可以通过 next 获取data中的数据
      data() {
        return {
          name: "Grayly"
        };
      },  
      beforeRouteEnter: (to, from, next) => {
        next(vm => {
          alert("hello" + vm.name);
        })
      },
    
    • (2)\color{red}{beforeRouteUpdate}
      • 这个方法是vue-router2.2版本加上的。因为原来的版本中,如果一个在两个子路由之间跳转,是不触发beforeRouteLeave的。这会导致某些重置操作,没地方触发。在之前,我们都是用watch 的。但是通过这个勾子,我们有了更好的方式。
      beforeRouteUpdate (to, from, next) {
        // 在当前路由改变,但是该组件被复用时调用
        // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
        // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 可以访问组件实例 `this`
      },
    
    • (3)\color{red}{beforeRouteLeave}
      • 这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。
      • 可以访问组件实例 this
      beforeRouteLeave: (to, from, next) => {
        if (confirm("你确定要离开吗") == true) {
          next();
        } else {
          next(false);
        }
      },
    

    每日额外

    返回上一级路由:

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

    相关文章

      网友评论

        本文标题:路由守卫

        本文链接:https://www.haomeiwen.com/subject/ilshaqtx.html