vue2的 router在使用过程中遇到的一些问题


Posted in Vue.js onApril 13, 2022

前言

本文记录vue2的vue-router在使用过程中遇到的一些问题。

问题记录

路由守卫的应用

根据路由守卫绑定的位置不同,有下面三种路由守卫

全局守卫

beforeEach/beforeResolve/afterEach

路由独享守卫

beforeEnter

组件内的守卫

beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave

其完整的导航解析过程,看官方文档的说明是这样的:

导航被触发。

在失活的组件里调用 beforeRouteLeave 守卫。

调用全局的 beforeEach 守卫。

在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。

在路由配置里调用 beforeEnter。

解析异步路由组件。

在被激活的组件里调用 beforeRouteEnter。

调用全局的 beforeResolve 守卫 (2.5+)。

导航被确认。

调用全局的 afterEach 钩子。

触发 DOM 更新。

用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

下面是几个常用钩子的实际应用场景:

beforeRouteLeave:跳转页面前,提醒用户,是否保存信息,或者自动为用户保存草稿。

beforeEach:判断是否登录、是否有权限等等,做跳转登录、申请权限、处理权限菜单等操作。

beforeRouteUpdate:重新进入相同页面时,重新初始化、加载数据。

beforeRouteEnter:获取当前页面的前一个页面的信息,比如我们在登录页,登录后要重定向到前一个页面,就可以通过这个钩子获取。注意:这里, 不!能!获取组件实例 this,因为新组件还没有被创建。不过,可以传一个回调,给next来访问实例,在创建好实例后,会执行。

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

其他几个路由守卫,我这边不常用,有补充的观众欢迎留下评论。

动态路由实现权限控制

应用场景:管理端根据不同权限,需要展示不同的菜单栏,同时希望没有权限的用户无法访问某些页面。

解决方案:我们在进入路由前,做一个拦截,先判断是否需要处理页面权限,再判断是否已经处理了权限,如果回答都是“是”,我们不需要做处理。否则,请求接口,获取到当前用户的权限菜单,再根据后台返回的信息,给router动态添加路由,再重新进入路由(避免拦截的访问是新添加的路由,出现访问不到的问题)。

具体看下面的伪代码:

router.beforeEach((to, from, next) => {
    if (needAuthority(to.name)) {  //不需要判断权限的页面,不处理
      next()
      return
    } 
    if (alreadyGetAuthorityMenu) {  //已经处理过权限菜单,不再处理
        next()
        return
    }
  
    handleAuthority().then(()=>{
        next({ ...to, replace: true })  //处理权限菜单接口成功,动态路由已经添加了,重新进入路由
      }).catch(() => {
        console.log('请求权限菜单接口错误')
        next()
    })
})

在handleAuthority中我们做了这些事情

  • 判断是否有权限,没有权限的用户,跳转到权限申请页面
  • 根据后台传过来的权限列表,用router.addRoutes(routes: Array)这个API,给router动态添加需要权限控制的页面对应的路由。
  • 给router动态添加一个兜底页面,可以是提示没权限的页面,或者简单一个404页面。

需要注意的是,动态添加路由后,需要next({ ...to, replace: true })重新进入路由,否则,如果拦截的页面路由,是你后面才添加的路由,那新的路由会访问不到。

hash模式的路由参数被干扰

应用场景:比如微信分享链接会加上,类似'?from=singlemessage&isappinstalled=0'这类的参数,当我们使用hash模式路由,同时使用params的方式传参数的时候,常常会被外界的参数干扰到,导致页面无法访问或者参数获取不到,使用动态路由参数是更好的选择。

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})
const userId = '123'
// 两种跳转方式
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

更进一步,我们可以使用props,将组件和路由解耦,在组件中定义id这个props,就能拿到传递的参数。

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true }
  ]
})

跳转同组件路由,不刷新?

应用场景:跳转同个组件的页面,但是参数不同,期望重新刷新页面。

解决方案:我们可以在beforeRouteUpdate中,重新执行进入页面要执行的代码,但如果需要初始化所有变量,难免有遗漏,更简单的方式是,监听route变化,有变化是 this.$router.go(0)刷新。

// 推荐
beforeRouteUpdate(to, from, next) {
    // 重新加载数据
    next();
},
watch: {
 '$route'(to, from) {
    this.$router.go(0)
 }
}

总结

到此这篇关于Vue router应用问题的文章就介绍到这了!

Vue.js 相关文章推荐
在Vue中使用mockjs代码实例
Nov 25 Vue.js
Vue 组件注册全解析
Dec 17 Vue.js
vue实现图书管理系统
Dec 29 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
vue实现轮播图帧率播放
Jan 26 Vue.js
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 #Vue.js
如何优化vue打包文件过大
Apr 13 #Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 #Vue.js
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 #Vue.js
vue数据字典取键值项目的字典问题
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
vue选项卡切换的实现案例
You might like
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
PHP中file_put_contents追加和换行的实现方法
2017/04/01 PHP
PHP addcslashes()函数讲解
2019/02/03 PHP
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
在JavaScript中正确引用bind方法的应用
2015/05/11 Javascript
AngularJS ng-change 指令的详解及简单实例
2016/07/30 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
详解Bootstrap各式各样的按钮(推荐)
2016/12/13 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
Angular事件之不同组件间传递数据的方法
2018/11/15 Javascript
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
JavaScript使用prototype属性实现继承操作示例
2020/05/22 Javascript
linux服务器快速卸载安装node环境(简单上手)
2021/02/22 Javascript
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
[01:32]2016国际邀请赛中国区预选赛IG战队首日赛后采访
2016/06/27 DOTA
python使用pyhook监控键盘并实现切换歌曲的功能
2014/07/18 Python
使用python实现生成用户信息
2017/03/20 Python
python正则实现计算器功能
2017/12/14 Python
python3 requests中使用ip代理池随机生成ip的实例
2018/05/07 Python
python实现图片文件批量重命名
2020/03/23 Python
基于django传递数据到后端的例子
2019/08/16 Python
基于python和flask实现http接口过程解析
2020/06/15 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
详解用selenium来下载小姐姐图片并保存
2021/01/26 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
shell程序中如何注释
2012/01/28 面试题
应届毕业生专业个人求职自荐信格式
2013/11/20 职场文书
工程总经理工作职责
2013/12/09 职场文书
花田少年史观后感
2015/06/16 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP