详解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 相关文章推荐
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
如何调试异步加载页面里包含的js文件
Oct 30 Javascript
异步安全加载javascript文件的方法
Jul 21 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
javascript中判断json的方法总结
Aug 27 Javascript
微信js-sdk上传与下载图片接口用法示例
Oct 12 Javascript
JS中判断null的方法分析
Nov 21 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
简单实现js倒计时功能
Feb 13 Javascript
layui table设置前台过滤转义等方法
Aug 17 Javascript
记录一次开发微信网页分享的步骤
May 07 Javascript
js实现超级玛丽小游戏
Mar 18 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
终于听上了直流胆调频
2021/03/02 无线电
探讨捕获php错误信息方法的详解
2013/06/09 PHP
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
php写入数据到CSV文件的方法
2015/03/14 PHP
php计算年龄精准到年月日
2015/11/17 PHP
PHP实现限制IP访问的方法
2017/04/20 PHP
PHP实现UTF8二进制及明文字符串的转化功能示例
2017/11/20 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
javascript中HTMLDOM操作详解
2014/12/11 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
利用css+原生js制作简单的钟表
2020/04/07 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
Vue之mixin全局的用法详解
2018/08/22 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
浅谈vue方法内的方法使用this的问题
2018/09/15 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
JS实现多选框的操作
2020/06/24 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
简单谈谈Python流程控制语句
2016/12/04 Python
python实现折半查找和归并排序算法
2017/04/14 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
flask session组件的使用示例
2018/12/25 Python
艺龙旅行网酒店预订:国内、港澳台酒店
2018/06/26 全球购物
学校安全工作制度
2014/01/19 职场文书
赞助商致辞
2015/07/30 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python