详解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 异步调用框架 (Part 6 - 实例 &amp; 模式)
Aug 04 Javascript
jquery text(),val(),html()方法区别总结
Nov 04 Javascript
JS简单实现文件上传实例代码(无需插件)
Nov 15 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
Jun 19 Javascript
每天一篇javascript学习小结(Date对象)
Nov 13 Javascript
详解JavaScript正则表达式之RegExp对象
Dec 13 Javascript
12个非常实用的JavaScript小技巧【推荐】
May 18 Javascript
jQuery为动态生成的select元素添加事件的方法
Aug 29 Javascript
Vue数据驱动模拟实现2
Jan 11 Javascript
Ionic+AngularJS实现登录和注册带验证功能
Feb 09 Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 Javascript
vue权限路由实现的方法示例总结
Jul 29 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
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
PHP 第三节 变量介绍
2012/04/28 PHP
php技术实现加载字体并保存成图片
2015/07/27 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
firefox浏览器不支持innerText的解决方法
2013/08/07 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
详解JavaScript中return的用法
2017/05/08 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
2018/10/31 Javascript
JavaScript中的this原理及6种常见使用场景详解
2020/02/14 Javascript
python安装Scrapy图文教程
2017/08/14 Python
python解决js文件utf-8编码乱码问题(推荐)
2018/05/02 Python
Django REST framework视图的用法
2019/01/16 Python
Python元组知识点总结
2019/02/18 Python
springboot配置文件抽离 git管理统 配置中心详解
2019/09/02 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
英国最受欢迎的母婴精品品牌:JoJo Maman BéBé
2021/02/17 全球购物
《商鞅南门立木》教学反思
2014/02/16 职场文书
幼儿教师师德师风演讲稿
2014/08/22 职场文书
个人查摆剖析材料
2014/10/04 职场文书
幼儿园感恩节活动方案
2014/10/06 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
php字符串倒叙
2021/04/01 PHP
Oracle 死锁的检测查询及处理
2021/09/25 Oracle
vue 给数组添加新对象并赋值
2022/04/20 Vue.js