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 相关文章推荐
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
js查找某元素中的所有图片地址的方法
Jan 16 Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 Javascript
基于JavaScript实现购物网站商品放大镜效果
Sep 06 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
Vue v2.5 调整和更新不完全问题
Oct 24 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
浅谈vuex actions和mutation的异曲同工
Dec 13 Javascript
微信小程序中显示倒计时代码实例
May 09 Javascript
微信公众号服务器验证Token步骤图解
Dec 30 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动态生成虚拟现实VRML网页
2006/10/09 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
jquery事件与函数的使用介绍
2013/09/29 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
javascript实现日期格式转换
2014/12/16 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
2015/04/16 Javascript
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
如何使用vue slot创建一个模态框的实例代码
2020/05/24 Javascript
[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator
2018/08/13 DOTA
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
编写Python脚本批量下载DesktopNexus壁纸的教程
2015/05/06 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
python 星号(*)的多种用途
2020/09/21 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
Python中使用Selenium环境安装的方法步骤
2021/02/22 Python
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
大学应届毕业生个人求职信
2013/09/23 职场文书
酒店人事专员岗位职责
2013/12/19 职场文书
安全教育月活动总结
2014/05/05 职场文书
人事任命书怎么写
2014/06/05 职场文书
2014年会计个人工作总结
2014/11/24 职场文书
合作意向书怎么写
2019/06/24 职场文书
分布式Redis Cluster集群搭建与Redis基本用法
2022/02/24 Redis