Vue项目中使用addRoutes出现问题的解决方法_vue.js

来源:脚本之家  责任编辑:小易  
目录
前言
一、404页面
1. 出现的原因
2. 解决方案
二、刷新白屏
1. 出现原因
2. 解决方案
三、路由重复
1.  出现原因
2. 解决方案
总结

前言

addRoutes官方介绍:

函数签名:

router.addRoutes(routes: Array<RouteConfig>)

动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。

这两天做vue后台权限管理系统的时候,发现使用vue提供的addRoute添加路由以后,会出现两个bug,一起来看看如何解决吧~

一、404页面

1. 出现的原因

使用vue提供的addRoutes添加了动态路由以后,404页面的路由设置不在路由的末尾了

2. 解决方案

将404页面的路由添加到动态路由的末尾

代码如下(示例):

// xxx => 用户有的动态路由数组
xxx.push({ path: '*', redirect: '/404', hidden: true })

// 动态添加路由配置
router.addRoutes(xxx)

二、刷新白屏

1. 出现原因

刷新时,动态路由没有加载完毕

2. 解决方案

路由添加完毕后,在进入页面

代码如下(示例):

if(用户的动态路由没有加载){
	// 解决刷新出现的白屏bug
  next({
    ...to, // next({ ...to })的目的,是保证路由添加完了再进入页面 (可以理解为重进一次)
    replace: true // 重进一次, 不保留重复历史
  })
} else {
	next()
}

三、路由重复

1.  出现原因

路由设置是通过router.addRoutes(xxx)来添加的,退出时,并没有清空,再次登陆,又加了一次,所以有重复。

2. 解决方案

代码如下(示例):

// 重置路由
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // 重新设置路由的可匹配路径
}

这个方法就是将路由重新实例化,相当于换了一个新的路由,之前加的路由就不存在了,需要在登出的时候, 调用一下即可。

总结

到此这篇关于Vue项目中使用addRoutes出现问题解决的文章就介绍到这了,更多相关Vue使用addRoutes的问题内容请搜索真格学网以前的文章或继续浏览下面的相关文章希望大家以后多多支持真格学网!

您可能感兴趣的文章:vue 解决addRoutes动态添加路由后刷新失效问题vue-router+vuex addRoutes实现路由动态加载及菜单动态加载vue addRoutes实现动态权限路由菜单的示例vue用addRoutes实现动态路由的示例解决vue addRoutes不生效问题vue 解决addRoutes多次添加路由重复的操作vue addRoutes路由动态加载操作

  • 本文相关:
  • vue插件vue-resource的使用笔记(小结)
  • 对vue中methods互相调用的方法详解
  • 详解vue-cli 异步加载数据的一些注意点
  • vue组件开发技巧总结
  • 详解vue3 composition api中的提取和重用逻辑
  • vue+elementui(el-upload)图片压缩,默认同比例压缩操作
  • vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
  • vue实现的双向数据绑定操作示例
  • vue2.4+新增属性.sync、$attrs、$listeners的具体使用
  • vue将对象新增的属性添加到检测序列的方法
  • Vue项目中使用axios获取网页数据问题
  • 实例详解ztree在vue项目中使用并且带有搜索功能
  • 在vue项目中使用sass的配置方法
  • 在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
  • 在vue项目中使用element-ui的Upload上传组件的示例
  • 如何在vue项目当中使用jquery
  • 详解如何在vue项目中使用layui框架及采坑
  • vue项目中使用scss的方法步骤
  • 在vue项目中正确使用iconfont的方法
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.jsreact其它首页javascriptjavascript类库vue.jsvue 解决addroutes动态添加路由后刷新失效问题vue-router+vuex addroutes实现路由动态加载及菜单动态加载vue addroutes实现动态权限路由菜单的示例vue用addroutes实现动态路由的示例解决vue addroutes不生效问题vue 解决addroutes多次添加路由重复的操作vue addroutes路由动态加载操作vue插件vue-resource的使用笔记(小结)对vue中methods互相调用的方法详解详解vue-cli 异步加载数据的一些注意点vue组件开发技巧总结详解vue3 composition api中的提取和重用逻辑vue+elementui(el-upload)图片压缩,默认同比例压缩操作vue项目配置 webpack-obfuscator 进行代码加密混淆的实现vue实现的双向数据绑定操作示例vue2.4+新增属性.sync、$attrs、$listeners的具体使用vue将对象新增的属性添加到检测序列的方法vue引用js文件的多种方式(推荐)详解vue 路由跳转四种方式 (带参vue之父子组件间通信实例讲解(prvue项目刷新当前页面的三种方法vue跳转页面的几种方法(推荐)vue props用法详解(小结)vue元素的隐藏和显示(v-show指令vue实现文件上传功能简单理解vue中props属性element-ui中select组件绑定值改快速解决vue-cli不能初始化webpack模板的vue实现集成腾讯tim即时通讯vue.js与后台数据交互的实例讲解vue仿今日头条实例详解解决element ui 自定义传参的问题vue 判断元素内容是否超过宽度的方式echarts.js 动态生成多个图表 使用vue封装vue回到顶部监听滚动事件详解vant picker+popup 自定义三级联动案例vue 中mixin 的用法详解
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved