vue路由守卫(回顾)

路由守卫

路由跳转前做一些验证,比如登录验证,是网站中的普遍需求。对此,vue-route 提供的beforeRouteUpdate可以方便地实现导航守卫(navigation-guards)。官方定义:导航守卫(navigation-guards)。
文档地址:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

一、全局前置守卫beforEach

1. 守卫方法接收三个参数:

   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()
        }
    })

二、全局后置钩子afterEach

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

三、路由独享的守卫beforeEnter

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

四、组件内的守卫

可以在路由组件内直接定义以下路由导航守卫:

1. beforeRouteEnter

   ① 在渲染该组件的对应路由被 confirm 前调用

   ② 不能 获取组件实例 this,因为当守卫执行前,组件实例还没被创建

   ③ 可以通过 next 获取data中的数据

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

2. beforeRouteUpdate

这个方法是vue-router2.2版本加上的。因为原来的版本中,如果一个在两个子路由之间跳转,是不触发beforeRouteLeave的。这会导致某些重置操作,没地方触发。在之前,我们都是用watch 的。但是通过这个勾子,我们有了更好的方式。

  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变,但是该组件被复用时调用
    // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
    // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },

3. beforeRouteLeave

这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。

可以访问组件实例 this

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

返回上一级路由

第一种:history.back();

第二种:this.$router.go(-1);
 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:青梅博客 » vue路由守卫(回顾)

分享到: 更多 (0)
avatar

评论 1

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1
    avatar

    总结的清晰明了!

    强哥囝囝4个月前 (08-18)国内网友QQ浏览器 Windows 10 回复
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活