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实现图书管理小案例
Dec 03 Vue.js
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
详解Vue router路由
Nov 20 Vue.js
vue+echarts实现多条折线图
Mar 21 Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
vue el-table实现递归嵌套的示例代码
Aug 14 Vue.js
Vue Element plus使用方法梳理
Dec 24 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中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
prototype 1.5相关知识及他人笔记
2006/12/16 Javascript
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
对比分析json及XML
2014/11/28 Javascript
js+jquery常用知识点汇总
2015/03/03 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
浅析Ajax语法
2016/12/05 Javascript
详解Vue方法与事件
2017/03/09 Javascript
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
python中django框架通过正则搜索页面上email地址的方法
2015/03/21 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
python3.5 tkinter实现页面跳转
2018/01/30 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
详解Python计算机视觉 图像扭曲(仿射扭曲)
2019/03/27 Python
在django-xadmin中APScheduler的启动初始化实例
2019/11/15 Python
使用python切片实现二维数组复制示例
2019/11/26 Python
python2 对excel表格操作完整示例
2020/02/23 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
儿子婚宴答谢词
2014/01/09 职场文书
婚前协议书范本
2014/04/15 职场文书
学校领导干部民主生活会整改方案
2014/09/29 职场文书
交通事故协议书范文
2014/10/23 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
nginx实现动静分离的方法示例
2021/11/07 Servers