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 相关文章推荐
js中 关于undefined和null的区别介绍
Apr 16 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
常见JS验证脚本汇总
Dec 01 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 Javascript
AngularJS表单详解及示例代码
Aug 17 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 Javascript
JavaScript调试之console.log调试的一个小技巧分享
Aug 07 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
Aug 28 Javascript
从零开始搭建一个react项目开发
Feb 09 Javascript
小程序实现列表点赞功能
Nov 02 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
Vue + ts实现轮播插件的示例
Nov 10 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
基于mysql的论坛(5)
2006/10/09 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
多种方法实现JS动态添加事件
2013/11/01 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
jquery加载图片时以淡入方式显示的方法
2015/01/14 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
400多行Python代码实现了一个FTP服务器
2012/05/10 Python
Python使用修饰器执行函数的参数检查功能示例
2017/09/26 Python
python实现聊天小程序
2018/03/13 Python
TensorFlow打印tensor值的实现方法
2018/07/27 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
Python for循环与getitem的关系详解
2020/01/02 Python
深入了解Python enumerate和zip
2020/07/16 Python
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
悦木之源美国官网:Origins美国
2016/08/01 全球购物
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
Skyscanner波兰:廉价航班
2017/11/07 全球购物
法国二手手袋、手表和奢侈珠宝购物网站:Collector Square
2018/07/05 全球购物
工程班组长岗位职责
2013/12/30 职场文书
社区敬老月活动实施方案
2014/02/17 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
材料物理专业求职信
2014/09/01 职场文书
2014年租房协议书范本
2014/10/30 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
教育读书笔记
2015/07/02 职场文书
2016年小学生寒假总结
2015/10/10 职场文书
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏