详解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 相关文章推荐
js 弹出菜单/窗口效果
Oct 30 Javascript
解析JavaScript中的标签语句
Jun 19 Javascript
javascript 动态创建表格
Jan 08 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
May 25 Javascript
jquery attr()设置和获取属性值实例教程
Sep 25 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
JavaScript数据结构学习之数组、栈与队列
May 02 Javascript
浅谈ElementUI中switch回调函数change的参数问题
Aug 24 Javascript
JS实现简单日历特效
Jan 03 Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 Javascript
vue 监听 Treeselect 选择项的改变操作
Aug 31 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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
PHP排序算法的复习和总结
2012/02/15 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
有道JavaScript监听浏览器的问题
2010/06/23 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
一百行JS代码实现一个校验工具
2019/04/30 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
2019/09/01 Javascript
使用python实现baidu hi自动登录的代码
2013/02/10 Python
Pyramid添加Middleware的方法实例
2013/11/27 Python
用Django实现一个可运行的区块链应用
2018/03/08 Python
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
Amaze UI 文件选择域的示例代码
2020/08/26 HTML / CSS
党员承诺书内容
2014/03/26 职场文书
奔腾年代观后感
2015/06/09 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书
话题作文之成长
2019/12/09 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript