快速理解Vue路由导航守卫

目录
  • 一、全局守卫
    • 1.全局前置守卫
  • 2.全局解析守卫
    • 3.全局后置钩子
  • 三、路由独享的守卫
  • 四、组件内的守卫
  • 五、一个完整的导航解析流程

概念:

“导航”表示路由正在发生变化

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程 中:全局的, 单个路由独享的, 或者组件级的。

导航守卫:包括全局导航守卫和局部导航守卫

一、全局守卫

vue-router全局有三个守卫

  • router.beforeEach :全局前置守卫,进入路由之前
  • router.beforeResolve :全局解析守卫,在beforeRouteEnter调用之后调用(不常用)
  • router.afterEach :全局后置钩子,进入路由之后

1.全局前置守卫

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

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

注意:如果是next(‘/') 或者 next({ path: ‘/' }),只要带了要放行的路径,那么前面必须有判断,在

什么时候给他放行,不然他会一直循环。

2.全局解析守卫

2.5.0 新增

// 全局解析守卫
router.beforeResolve((to,from.next) => { })

在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似,区

别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用。

3.全局后置钩子

你也可以注册全局后置钩子,然而和守卫不同的是,这些钩子不会接受 next 函数也不会改变导航本身:

// 全局后置钩子
 router.afterEach((to,form) => { })

因为:afterEach被调用时,路由已经跳转完成,所以不需要next函数

三、路由独享的守卫

如果不想在全局配置路由的话,可以为某些路由单独配置守卫

比如:mainpage页面单独配置守卫

{
path: '/mainpage',
name: 'About',
component: About, // 路由独享守卫
beforeEnter:(to,from,next) => {
 if(from.name === '/mainpage/about'){ alert("这是从about来的")
   }else{
 alert("这不是从about来的")
   }next(); // 必须调用来进行下一步操作。否则是不会跳转的
 }
}
},

四、组件内的守卫

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

  • beforeRouteEnter():进入路由前
  • beforeRouteUpdate():路由复用同一个组件时
  • beforeRouteLeave():离开当前路由时

在Product中举个例子:

// 全局解析守卫
router.beforeResolve((to,from.next) => {
})
// 全局后置钩子
router.afterEach((to,form) => {
})
{
path: '/mainpage',
name: 'About',
component: About,
// 路由独享守卫
beforeEnter:(to,from,next) => {
if(from.name === '/mainpage/about'){
alert("这是从about来的")
}else{
alert("这不是从about来的")
}
next(); // 必须调用来进行下一步操作。否则是不会跳转的
}
}
},
export default {
// 组件内守卫beforeRouteUpdate被触发的条件是:当前路由改变,但是该组件被复用的时候。
比如说:product/orders到product/cart这个路由,都复用了 Product.vue 这个组件,这个时候
beforeRouteUpdate就会被触发。可以获取到this实例。
一个完整的导航解析流程
// 因为这个钩子调用的时候,组件实例还没有被创建出来,因此获取不到this
beforeRouteEnter (to, from, next) {
console.log(to.name);
// 如果想获取到实例的话
// next(vm=>{
// // 这里的vm是组件的实例(this)
// });
next();
},
beforeRouteUpdate(to,from,next){
console.log(to.name, from.name);
next();
},
// 路由即将要离开的时候调用此方法
// 比如说,用户编辑了一个东西,但是还么有保存,这时候他要离开这个页面,就要提醒他一下,还没保
存,是否要离开
beforeRouteLeave (to, from, next) {
const leave = confirm("确定要离开吗?");
if(leave) next() // 离开
else next(false) // 不离开
},
}
  • beforeRouteUpdate被触发的条件是:当前路由改变,但是该组件被复用的时候。
  • 比如说:product/orders到product/cart这个路由,都复用了 Product.vue 这个组件,这个时候
  • beforeRouteUpdate就会被触发。可以获取到this实例。

五、一个完整的导航解析流程

  • 1、导航被触发。
  • 2、在失活的组件(即将离开的页面组件)里调用离开守卫。 beforeRouteLeave
  • 3、调用全局的 beforeEach 守卫。
  • 4、在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
  • 5、在路由配置里调用(路由独享的守卫) beforeEnter
  • 6、解析异步路由组件
  • 7、在被激活的组件(即将进入的页面组件)里调用 beforeRouteEnter
  • 8、调用全局的 beforeResolve 守卫 (2.5+)。
  • 9、导航被确认。
  • 10、调用全局的 afterEach 钩子。所有的钩子都触发完了。
  • 11、触发 DOM 更新。
  • 12、用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

到此这篇关于快速理解Vue路由导航守卫的文章就介绍到这了,更多相关Vue路由导航守卫内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue路由导航守卫和请求拦截以及基于node的token认证的方法

    什么时候需要登录验证与权限控制 1.业务系统通常需要登录才能访问受限资源,在用户未登录情况下访问受限资源需要重定向到登录页面: 2.多个业务系统之间要实现单点登录,即在一个系统或应用已登录的情况下,再访问另一个系统时不需要重复登录:在登录过期或失效时,需要重定向到登录页面 如何使用路由守卫 定义一个index.js页面用来定义页面的路由,代码如下: import Vue from 'vue' import Router from 'vue-router' import blogIndex fro

  • 快速理解Vue路由导航守卫

    目录 一.全局守卫 1.全局前置守卫 2.全局解析守卫 3.全局后置钩子 三.路由独享的守卫 四.组件内的守卫 五.一个完整的导航解析流程 概念: "导航"表示路由正在发生变化 vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程 中:全局的, 单个路由独享的, 或者组件级的. 导航守卫:包括全局导航守卫和局部导航守卫 一.全局守卫 vue-router全局有三个守卫 router.beforeEach :全局前置守卫,进入路由之前 ro

  • Vue Router4路由导航守卫实例全面解析

    目录 前言 一.什么是导航守卫 二.全局前置守卫 可选的第三个参数 next 三.全局解析守卫 四.全局后置钩子 五.路由独享的守卫 六.组件内的守卫 可用的配置 API 使用组合 API 七.完整的导航解析流程 前言 在写Vue项目的时候,少不了使用路由vue-router,而路由守卫是vue-router中一个非常重要的概念,也是非常重要的技巧.它能够很好的帮助开发者“监视”每一个跳转的路由. 一.什么是导航守卫 正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫

  • vue router导航守卫(router.beforeEach())的使用详解

    导航守卫 导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的.(记住参数或查询的改变并不会触发进入/离开的导航守卫.你可以通过观察$route对象来应对这些变化,或使用beforeRouteUpdate的组件内守卫.) 好久没写一些东西了,总是感觉有啥缺少的.~~~~恰好碰到最近在写一个移动端项目,遇到了如何使同一个链接在不同条件下跳转到不同路由组件问题,譬如大家经常看到手机中没登录跳转登录页,登陆后跳转个人信息页等.废话不多说了

  • Vue2.x配置路由导航守卫实现用户登录和退出

    目录 前言 一.配置路由导航守卫 1. 全局导航守卫 2. 局部导航守卫 二.用户登录 1. axios配置 2. 用户登录代码 三.用户退出 1. 实现代码 总结 前言 之前在Vue的学习中通过路由导航守卫控制实现了用户登录模块的功能,现在再次做项目时又要通过Vue配置路由导航守卫来实现相同的功能,在此将实现过程进行记录与总结(本文基于Vue2.x进行实现) 提示:以下是本篇文章正文内容,下面案例可供参考 一.配置路由导航守卫 1. 全局导航守卫 如果项目中只有后台的情况,在Vue中配置全局导

  • 详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)

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

  • 深入理解vue路由的使用

    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 本文将以示例的形式来介绍vue-router的各个特性,一共包含6个示例,每个示例都有乞丐版,前5个示例有皇帝版. 乞丐版是将所有代码混杂在一起的HTML页面,皇帝版是基于vue-w

  • 关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法

    #在切换路由时,组件会被复用,不过,这也意味着组件的生命周期钩子不会再被调用. 解决办法有两种,1简单地 watch (监测变化) $route 对象: const User = { template: '...', watch: { '$route' (to, from) { // 对路由变化作出响应... } } } 2.使用 2.2 中引入的 beforeRouteUpdate 导航守卫: const User = { template: '...', beforeRouteUpdate

  • 详解vue-router的导航钩子(导航守卫)

    在做vue项目的时候,要求用户在页面访问前先登录,或在离开页面前发出提醒.vue官方提供的路由管理器 vue-router 提供的导航钩子,通过跳转或取消的方式守卫导航.以下总结了路由钩子函数的使用方法和一些使用场景. 一.全局守卫 router.beforeEach 路由改变前的钩子 const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { ... ... }) 其中: to:将要访问的路径 fr

  • 一篇文章带你了解vue路由

    目录 概念 Vue Router 简介 Vue Router的特性 Vue Router的使用步骤 分类 嵌套路由 动态路由 命名路由 编程式导航 总结 概念 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源.那么url地址和真实的资源之间就有一种对应的关系,就是路由. 路由分为前端路由和后端路由 1).后端路由是由服务器端进行实现,并完成资源的分发后端路由性能相对前端路由来说较低,所以,我们接下来主要学习的是前端路由2)

随机推荐