Vue2.0 Router 导航守卫

官方文档地址:https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

全局守卫

可以使用 router.beforeEach 注册一个全局前置守卫:

例如: 判断在用户未登录时, 跳转到 "/login" 的路由,  登录时,直接跳转到默认路由

const router = new VueRouter({ ... }) // 实例化 router
router.beforeEach((to, from, next) => {
  console.log(to); // 即将进入的路由
  console.log(from); // 即将离开的路由(当前路由)
  let token = window.sessionStorage.getItem("token")
  if( token){
    to.path === "/login" ? next({ path: ‘/‘ }) : next();
  }else {
    to.path !== "/login" ? next("/login") : next() ;
  }
})

下面是官方文档对于参数说明:

每个守卫方法接收三个参数:

  • to: Route: 即将要进入的目标 路由对象
  • from: Route: 当前导航正要离开的路由
  • next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
    • next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
    • next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
    • next(‘/‘) 或者 next({ path: ‘/‘ }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向 next 传递任意位置对象,且允许设置诸如 replace: truename: ‘home‘ 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
    • next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

  确保要调用 next 方法,否则钩子就不会被 resolved。

全局解析守卫

在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用。

路由独享的守卫

在路由配置中属性 beforeEnter

const router = new Router({
  mode:‘history‘,
  routes: [
    {
      path: ‘/‘,
      name: ‘home‘,
      component: Home
    },
    {
      path: ‘/test‘,
      name: ‘test‘,
      component: () =>  import("@/view/test"),
      beforeEnter: (to, from, next) => {
        console.log(‘独享的守卫‘);
        next();
      }
    }
  ]
})

router.beforeEach((to, from, next) => {
  console.log("全局守卫");
  next();
})

同时存在全局守卫和再执行路由独立守卫时,执行的结果是:

先执行全局守卫,再执行路由独立守卫。

组件内的守卫

可以在组件内部使用路由导航守卫, (我的理解类似于路由的生命周期)。

  • beforeRouteEnter                      路由组件被渲染之前之前调用, 注: 此时不能获取到组件实例的this 
  • beforeRouteUpdate(2.2新增)                        路由被修改是调  
  • beforeRouteLeave                      导航离开该组件的对应路由时调用

1. 守卫 beforeRouteEnter

export default {
    data(){
        return {
            txt:‘白夜行将‘
        }
    },

    beforeRouteEnter (to, from, next) {
        console.log(this);
        console.log(this.txt);
        //需要执行 执行next()函数, 否则不会渲染
        next();
    }
}

上面的代码执行的结果如下:

可以得出 :

  beforeRouteEnter 守卫不能访问 this,因为此时新组件还未被创建;

如果需要对组件实例进行操作, 可以在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。即: 用next()的回调函数进行操作实例

beforeRouteEnter (to, from, next) {
        next(
            scope =>{
                console.log(scope.txt);
                scope.txt = "暗夜来迟"
                console.log(scope.txt);
            }
        )
    }

注意:  只有beforeRouteEnter 支持给 next 传递回调的唯一守卫; beforeRouteUpdate 和 beforeRouteLeave 此时组件以及完成创建, this 已经可以使用。

2. 守卫 beforeRouteUpdate

 在当前路由改变,但是该组件被复用时调用

 举例来说,对于一个带有动态参数的路径 /test/:id,在 /test/1 和 /test/2 之间跳转的时候,

 在 路由hash模式时, 渲染同样的 test 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用

可以访问组件实例 this

    beforeRouteUpdate (to, from, next){
        console.log(this.txt);
        next();
    },

在变化id时, 会调用 beforeRouteUpdate 钩子

注意: 使用该守卫时, 路由的模式只能是hash, 使用history模式, 该守卫不生效,

3. 守卫 beforeRouteLeave

离开该组件的对应路由时调用,此时还可以访问组件 this;

用户操作未完成是,不允许退出时,可以是next(false); 阻止导航切换

    beforeRouteLeave (to, from , next) {
        next(false)
    },

完整的导航解析流程

在router 的index 文件中设置 beforeEach beforeResolve  afterEach 和 路由独享守卫 四种守卫;

index

在路由home文件配置 beforeRouteLeave 路由

    beforeRouteLeave (to, from , next) {
        console.log(‘路由home的守卫 beforeRouteLeave‘);
        next()
    },
    deactivated(){
        console.log(‘home离开‘);
    },

home

在路由test文件配置 beforeRouteEnter路由

    beforeRouteEnter (to, from, next) {
        console.log(‘路由test的 beforeRouteEnter 守卫‘);
        next(scope => {
            console.log(‘beforeRouteEnter 守卫 回调函数‘);
        })
    },

    beforeRouteLeave (to, from , next) {
        console.log(‘路由test的 beforeRouteLeave 守卫‘);
        next(false)
    },

    activated(){
        console.log(‘test,完成加载‘);
    }

test

控制台打印结果 (keepa-alive 组件切换)

在点击路由跳转按钮后,执行顺序

  1. 导航被触发。
  2. 在失活的组件里调用 beforeRouteLeave 守卫。
  3. 调用全局的 beforeEach 守卫。
  4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
  5. 在路由配置里调用 beforeEnter
  6. 解析异步路由组件。
  7. 在被激活的组件里调用 beforeRouteEnter
  8. 调用全局的 beforeResolve 守卫 (2.5+)。
  9. 导航被确认。
  10. 调用全局的 afterEach 钩子。
  11. 执行 路由home 的 keep-alive  的 deactivated 钩子
  12. 触发 DOM 更新 ,执行路由test 的 keep-alive  的 activated 的钩子
  13. 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

以上个人学习理解,如有错误请指正

原文地址:https://www.cnblogs.com/blog-sanyu/p/10151143.html

时间: 2024-11-08 15:50:28

Vue2.0 Router 导航守卫的相关文章

vue2.0 实现导航守卫(路由守卫)---登录验证

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

vue2.0 $router和$route的区别

在vue2.0里页面参数是 this.$route.query或者 this.$route.params 接收router-link传的参数. 在路由跳转的时候除了用router-link标签以外需要在script标签在事件里面跳转,所以有个方法就是在script标签里面写this.$router.push('要跳转的路径名'), 在写的时候发现这两个为什么不同,在控制台打出this的时候,发现$route和$router同时存在 $route为当前router跳转对象里面可以获取name.pa

vue2路由导航守卫(钩子函数)

所谓的Vue路由导航守卫,也就是我们常说的生命周期钩子函数,钩子函数的意思就是在特定的时刻,Vue会自动触发这个方法,我们可以通过这些个钩子函数,实现一些功能,比如,某些页面需要登录后才可以访问,某些页面需要用户达到什么等级才可以访问,又或者是跳转页面后修改一些信息等等,我们就可以通过路由导航守卫来拦截并做相应的处理 全局守卫: 挂载在router实例上 全局前置钩子 注意:参数或查询的改变并不会触发进入/离开的导航守卫.你可以通过观察 $route 对象来应对这些变化,或使用 beforeRo

vue-router导航守卫(router.beforeEach())的使用

好久没写一些东西了,总是感觉有啥缺少的.~~~~恰好碰到最近在写一个移动端项目,遇到了如何使同一个链接在不同条件下跳转到不同路由组件问题,譬如大家经常看到手机中没登录跳转登录页,登陆后跳转个人信息页等.废话不多说了,直接上图: 这是没登录状态,点击下面mine按钮跳转至登录页 这个是我登录了自己的账号后,再次点击mine按钮会跳转至个人信息页面 好了,看到了这个效果今天咱们来实现下 实现方法 我们点击下面mine按钮其实是路由跳转,所以我们需要在跳转路由之前做一个判断,根据不同的条件让这个链接跳

八、Vue Router 进阶-导航守卫

导航守卫 所谓的导航守卫,就是路由的钩子函数.主要用来通过跳转或取消导航.导航守卫分三种:全局.路由独享.组件级的. 注意:参数或查询的改变并不会触发进入和离开的导航守卫.可以通过watch监听$route对象,或使用beforeRouteUpdate的组件内守卫. 全局前置守卫 进入路由之前的钩子函数,接受next函数,在此可以阻止进入路由或跳转到指定路由. <script> const router = new VueRouter({ ... }); // 接收三个参数:to为目标路由对象

挂载路由导航守卫 router

import Vue from 'vue' import Router from 'vue-router' import Login from './components/Login.vue' import Home from './components/Home.vue' import Welcome from './components/Welcome.vue' import Users from './components/user/Users.vue' import Rights fro

Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]

前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比较高频的考点,那么该如何回答这类问题,让人有眼前一亮的感觉呢... 前端进阶积累.公众号.GitHub Vue-Router导航守卫: 有的时候,我们需要通过路由来进行一些操作,比如最常见的登录权限验证,当用户满足条件时,才让其进入导航,否则就取消跳转,并跳到登录页面让其登录. 为此我们有很多种方法

Vue2.0 + Element-UI + WebAPI实践:简易个人记账系统

最近正在学习Vue2.0相关知识,正好近期饿了么桌面端组件Element-UI发布,便动手做了一款简易个人记账系统,以达到实践及巩固目的. 1.开发环境 Win10 + VS2015 + Sqlserver2008R2 + WebAPI + Dapper + Vue2.0 + Element-UI 2.项目解决方案概览 简单介绍下,Account是WebAPI项目,承载前端请求:Account.BLL.Account.DAL.Account.Entity不废话:Account.Common是对D

vue2.0+element-ui(01简单点的单页面)

前言: 在<Vue.js权威指南>刚出版的时候,自己就作为一名前端粉捧了一把场,可是真是应了那句"出来混,总是要还的!"这句话了,那时候信心满满的买来书想要认真研究的时候,却还是把它搁浅了.直到最近工作上要使用它来做一个后台管理系统,才不得不逼迫自己再次重新拿起书,看起文档,努力研究这个异常流行的Vue.js. 过程: 简单页面呈现如下   (图片貌似有点模糊,基本实现就是简单的增删改查): 1.使用到的技术: vue2.0:https://cn.vuejs.org/v2/