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跨域问题之跨域iframe自适应大小实现代码
Jul 17 Javascript
ajax与302响应代码测试
Oct 23 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
Apr 07 Javascript
JQuery菜单效果的两个实例讲解(3)
Sep 17 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
JS请求servlet功能示例
Jun 01 Javascript
基于JavaScript实现百度搜索框效果
Jun 28 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
关于引入vue.js 文件的知识点总结
Jan 28 Javascript
JavaScript 如何计算文本的行数的实现
Sep 14 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
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
下载文件的点击数回填
2006/10/09 PHP
Codeigniter中mkdir创建目录遇到权限问题和解决方法
2014/07/25 PHP
PHP在线调试执行的实现方法(附demo源码)
2016/04/28 PHP
PHP水印类,支持添加图片、文字、填充颜色区域的实现
2017/02/04 PHP
LNMP部署laravel以及xhprof安装使用教程
2017/09/14 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
在 PHP 和 Laravel 中使用 Traits的方法
2019/11/13 PHP
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
单击某一段文字改写文本颜色
2014/06/06 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
2014/12/16 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
2018/08/22 Javascript
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
用webpack4开发小程序的实现方法
2019/06/04 Javascript
微信小程序获取用户绑定手机号方法示例
2019/07/21 Javascript
详解NodeJs项目 CentOs linux服务器线上部署
2019/09/16 NodeJs
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
如何高效使用Python字典的方法详解
2017/08/31 Python
wxPython之解决闪烁的问题
2018/01/15 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
python与js主要区别点总结
2020/09/13 Python
python 实现IP子网计算
2021/02/18 Python
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
什么是封装
2013/03/26 面试题
史学专业毕业生求职信
2014/05/09 职场文书
旅行社优秀创业计划书
2014/08/16 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
谢师宴学生答谢词
2015/09/30 职场文书
python基础之停用词过滤详解
2021/04/21 Python