详解vue-router导航守卫


Posted in Javascript onJanuary 19, 2019

当做Vue-cli项目的时候需要在路由跳转前做一些验证,比如登录验证,是网站中的普遍需求。

对此,vue-router 提供的 beforeEach可以方便地实现全局导航守卫(navigation-guards)。组件内部的导航守卫函数使用相同,只是函数名称不同(beforeRouteEnter 、beforeRouteUpdate(2.2 新增) 、beforeRouteLeave)。

钩子(Hook),早期编程可能有个概念叫句柄,不知道将两者类比而且强行归为一类是不是合适。钩子的用处是在某个特定流程中的不同时机暴露出一些函数,使得用户可以通过覆写这些函数实现在原有位置执行自己的代码逻辑的功能。

1. 分类

vue-router中的导航钩子按定义位置不同(执行时机也不同)分为全局钩子、路由级钩子和组件级钩子。

  • 全局钩子

全局钩子有三个,分别是beforeEach、beforeResolve和afterEach,在路由实例对象注册使用;

  • 路由级钩子

路由级钩子有beforeEnter,在路由配置项中项定义;

  • 组件级钩子

组件级钩子有beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave,在组件属性中定义;

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

如何设置一个全局守卫

你可以使用 router.beforeEach 注册一个全局前置守卫:就是在你router配置的下方注册

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
 // ...
})

当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。

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

to: Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

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

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

一、认识beforeEach()中的参数

详解vue-router导航守卫

详解vue-router导航守卫

全局守卫(就是对整个路由实例进行守卫,对其中的子路由也会进行守卫)

详解vue-router导航守卫

路由独享的守卫(对实例中某个路由进行守卫)

详解vue-router导航守卫

小结:

全局和局部

import Vue from 'vue';
import VueRouter from 'vue-router';
// Vue中插件必须use注册
Vue.use(VueRouter);
// 路由配置项,此处是路由级钩子的定义
const routes = [{
    path: '/',
    component: resolve => require(['./index.vue'], resolve),
    keepAlive: true,
  },
  {
    path: '/user/:userName',
    keepAlive: true,
    beforeEnter(to,from,next){
      console.log('router beforeEnter');
      next();
    },
    component: resolve => require(['./user.vue'], resolve),
  }];
// 实例化路由对象
const router = new VueRouter({
  routes
});
// 全局钩子
router.beforeEach((to,from,next)=>{
  console.log('global beforeEach')
  next();
});
router.beforeResolve((to,from,next)=>{
  console.log('global beforeResolve')
  next();
});
router.afterEach((to,from,next)=>{
  console.log('global afterEach')
});
// 实例化Vue对象并挂载
new Vue({
  router
}).$mount('#app');

use.vue组件中使用导航守卫

<template>
  <div>
    <h1>{{ msg }}</h1>
    <p>我是:{{userName}}</p>
  </div>
</template>
<script>
  export default {
    name: 'user',
    data () {
      return {
        msg: '这里是 User Page.',
        userName: '叶落'
      };
    },
    methods: {},
    mounted () {
      var me = this;
      me.userName = me.$route.params.userName;
      console.log('user mounted.');
    },
    beforeRouteEnter (to, from, next) {
      console.log('component beforeRouteEnter');
      next();
    },
    beforeRouteUpdate (to, from, next) {
      console.log('component beforeRouteUpdate');
      next();
    },
    beforeRouteLeave(to,from,next){
      console.log('component beforeRouteLeave');
      next();
    }
  };
</script>

执行时机

由首页进入user页面:

global beforeEach > router beforeEnter > component beforeRouteEnter > global beforeResolve > global afterEach > mounted

由user回到首页:

component beforeRouteLeave => global beforeEach => global beforeResolve => global afterEach

排除beforeRouteUpdate,其余六个导航钩子的执行时机其实很好理解。大体按照leave、before、enter、resolve、after的顺序并全局优先的思路执行。beforeRouteUpdate的触发是在动态路由情形下,比如 path: '/user/:userName' 这条路由,当页面不变更只动态的改变参数userName时,beforeRouteUpdate便会触发。

详解vue-router导航守卫

结论:使用vue组件拼凑成整个应用,每个页面是独立的,路由依靠链接跳转,会刷新页面。使用vue-router则可以不刷新页面加载对应组件,hash和history模式模拟路径变化,不刷新页面。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
jquery判断checkbox(复选框)是否被选中的代码
Oct 20 Javascript
js实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
ExtJs中gridpanel分组后组名排序实例代码
Dec 02 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
针对JavaScript中this指向的简单理解
Aug 26 Javascript
Bootstrap进度条实现代码解析
Mar 07 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
Aug 31 Javascript
js加减乘除精确运算方法实例代码
Jan 17 Javascript
JS尾递归的实现方法及代码优化技巧
Jan 19 #Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
Jan 19 #Javascript
js实现延迟加载的几种方法详解
Jan 19 #Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 #Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
Jan 19 #Javascript
js的各种数据类型判断的介绍
Jan 19 #Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 #Javascript
You might like
让PHP支持页面回退的两种方法
2008/01/10 PHP
PHP内核探索:变量概述
2014/01/30 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
2012/12/06 Javascript
js 验证密码强弱的小例子
2013/03/21 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
2015/09/07 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
jQuery 表单序列化实例代码
2017/06/11 jQuery
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
Vue组件通信之Bus的具体使用
2017/12/28 Javascript
vue和better-scroll实现列表左右联动效果详解
2019/04/29 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
es6函数之严格模式用法实例分析
2020/03/17 Javascript
python遍历 truple list dictionary的几种方法总结
2016/09/11 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
详解Django中views数据查询使用locals()函数进行优化
2020/08/24 Python
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
New Balance比利时官方网站:购买鞋子和服装
2021/01/15 全球购物
就业协议书的作用
2014/04/11 职场文书
单位法人授权委托书范本
2014/10/09 职场文书
2014年合同管理工作总结
2014/12/02 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书