vue-router的钩子函数用法实例分析


Posted in Javascript onOctober 26, 2019

本文实例讲述了vue-router的钩子函数用法。分享给大家供大家参考,具体如下:

vue路由钩子大致可以分为三类:

1.全局钩子

主要包括beforeEach和aftrEach,

beforeEach函数有三个参数:

  • to:router即将进入的路由对象
  • from:当前导航即将离开的路由
  • next:Function,进行管道中的一个钩子,如果执行完了,则导航的状态就是 confirmed (确认的);否则为false,终止导航。

afterEach函数不用传next()函数

这类钩子主要作用于全局,一般用来判断权限,以及以及页面丢失时候需要执行的操作,例如:

//使用钩子函数对路由进行权限跳转
router.beforeEach((to, from, next) => {
  const role = localStorage.getItem('ms_username');
  if(!role && to.path !== '/login'){
    next('/login');
  }else if(to.meta.permission){
    // 如果是管理员权限则可进入,这里只是简单的模拟管理员权限而已
    role === 'admin' ? next() : next('/403');
  }else{
    // 简单的判断IE10及以下不进入富文本编辑器,该组件不兼容
    if(navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor'){
      Vue.prototype.$alert('vue-quill-editor组件不兼容IE10及以下浏览器,请使用更高版本的浏
      览器查看', '浏览器不兼容通知', {
        confirmButtonText: '确定'
      });
    }else{
      next();
    }
  }
})

2.单个路由里面的钩子

主要用于写某个指定路由跳转时需要执行的逻辑

{
          path: '/dashboard',
          component: resolve => require(['../components/page/Dashboard.vue'], resolve),
          meta: { title: '系统首页' },
          beforeEnter: (to, from, next) => {
           },
          beforeLeave: (to, from, next) => {
          }
        },

3.组件路由

主要包括 beforeRouteEnter和beforeRouteUpdate ,beforeRouteLeave,这几个钩子都是写在组件里面也可以传三个参数(to,from,next),作用与前面类似.

beforeRouteEnter(to, from, next) {
  next(vm => {
   if (
    vm.$route.meta.hasOwnProperty('auth_key') &&
    vm.$route.meta.auth_key != ''
   ) {
    if (!vm.hasPermission(vm.$route.meta.auth_key)) {
     vm.$router.replace('/admin/noPermission')
    }
   }
  })
 },

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
Jun 02 Javascript
javascript两段代码,两个小技巧
Feb 04 Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 Javascript
Javascript玩转继承(一)
May 08 Javascript
jquery delay()介绍及使用指南
Sep 02 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
Sep 06 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 Javascript
JavaScript String 对象常用方法总结
Apr 28 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
VUE兄弟组件传值操作实例分析
Oct 26 #Javascript
layui实现给某一列加点击事件
Oct 26 #Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 #Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
Oct 26 #Javascript
layui 解决富文本框form表单提交为空的问题
Oct 26 #Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
Oct 26 #Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 #jQuery
You might like
php读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
如何使用PHP获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
php 判断网页是否是utf8编码的方法
2014/06/06 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
php邮件发送的两种方式
2020/04/28 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
php session 写入数据库
2016/02/13 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
2014/07/27 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
微信小程序实现tab左右切换效果
2020/11/15 Javascript
[01:20]PWL开团时刻DAY9——听说潮汐没用?
2020/11/10 DOTA
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
OpenCV中VideoCapture类的使用详解
2020/02/14 Python
vscode调试django项目的方法
2020/08/06 Python
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
求职简历自荐信
2013/10/20 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
个人维稳承诺书
2015/05/04 职场文书
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers
Vue-Element-Admin集成自己的接口实现登录跳转
2021/06/23 Vue.js
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers