基于vue 动态菜单 刷新空白问题的解决

1.先确认自己在route.js 或者 main.js 中有没有使用 路由守卫vue.beforeEach和vue.addRouters() 促使页面每次刷新，重新根据后台返回数据生成动态路由，就像你在登陆时做的事情一样。

代码示范注意点：

//注意：确定自己避免了路由守卫进入死循环
let oneRun = true; //通过oneRun变量控制 避免陷入死循环
router.beforeEach((to,from,next)=>{
  if(oneRun){
    oneRun = false;//必须在creatNewRouter() 执行
    createNewRouter();
    next({...to, replace: true})// 必不可少的，确保你的动态路由创建成功再去执行其它代码
  }
})

function createNewRouter(){
  //请在这里做你登陆之后所做的创建动态路由的事情 一模一样去做。
  //不要用缓存，session或localstorage 否则会报错。你需要重新发出请求 登陆怎么做的 这里就怎么做的
};

2. 如果你发现刷新之后成功了但回退发生了问题 请把路由模式切换成 history vue-route 默认使用hash模式。也就是地址上出现眨眼的 /#/ 当然 history模式本体跑没问题 发包后 需要后端配置 后端配置指导链接 把链接复制发2给后端同学即可。

3. 如果你想了解更多

1.为什么 用了缓存会失败？ 这是因为当你存入缓存时候用了JSON.stringify 这东西 会改变 compoent对象 让它少了一个 render函数。这里你可以打印出来你缓存之后 又解析 出来的路由 比对一下 而 addRouters()要求它接受的数组参数必须严格符合路由规则。

2.next({...to, replace: true}) 为什么必不可少呢？ 在hash模式下 你的动态路由可能还没创建完成就 跑其它代码了 毕竟 路由守卫是异步操作 在history模式下 可能没有这个问题 未实测 写上最好。

3.每次刷新发请求拿路由不合适？

继续缓存，但从缓存取出来路由之后，复写路由里面所有的compoent对象。复写方法很多，如递归遍历路由。然后 item.compoent = vueName; vueName也就是你导出来的vue文件变量。

补充知识：VUE 动态注入路由白屏，再次刷新才显示页面问题

问题描述：

由于系统需要动态注入路由，刚开始在路由拦截里面根据账号权限动态获取路由，然后注入到本地路由中，代码如下：

// 尝试获取本地 store 用户信息中权限字段
const hasRoles = store.getters.roles && store.getters.roles.length > 0
if (hasRoles) {
 next()
} else {
 try {
  // 用token换取用户信息
  store.dispatch('user/getInfo').then(roles => {
   if (!roles) new Error('roles error!')
   // 根据获取的用户权限映射对应的路由信息
   store.dispatch('permission/generateRoutes', roles).then(accessRoutes => {
    if (!accessRoutes) new Error('accessRoutes error!')
    // 动态加入路由
    router.addRoutes(accessRoutes)
    // 确保路由完整性，设置replace 为true 这样导航就不会留下历史记录。
    next({
     ...to,
     replace: true
    })
   })
  })
 } catch (error) {
  // 删除本地token 并且重新登陆
  await store.dispatch('user/resetToken')
  Message.error(error || 'Has Error')
  next(`/login?redirect=${to.path}`)
  NProgress.done()
 }
}

这样写只有在登陆之后刷新页面才会动态注入，解决办法就是在登陆之后执行一下 红色字体部分代码

以上这篇基于vue 动态菜单 刷新空白问题的解决就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue 解决addRoutes动态添加路由后刷新失效问题

    vue 解决addRoutes动态添加路由后刷新失效问题

    前言 某些场景下我们需要利用addRoutes动态添加路由,但是刷新后就会失效,前段时间项目里刚好遇到了这个应用场景,所以就花时间研究了一下,做下分享跟记录,说的不对的地方,请大家指正. 应用场景:用户a登录进系统,页面上有个按钮,点击之后会动态添加路由并且跳转,跳转过去之后,用户刷新后也会停留在当前页面. 不点这个按钮,浏览器输入地址,用户会跳到404页面 github:https://github.com/Mrblackant/keepRouter/tree/master 思路 1.用户点击

  • Vue Router 实现动态路由和常见问题及解决方法

    个人理解:动态路由不同于常见的静态路由,可以根据不同的「因素」而改变站点路由列表.常见的动态路由大都是用来实现:多用户权限系统不同用户展示不同导航菜单. 如何利用Vue Router 实现动态路由 Vue项目实现动态路由的方式大体可分为两种: 前端将全部路由规定好,登录时根据用户角色权限来动态展示路由: 路由存储在数据库中,前端通过接口获取当前用户对应路由列表并进行渲染: 第一种方式在很多Vue UI Admin上都实现了,可以去读一下他们的源码理解具体的实现思路,这里就不过多展开.第二种方式现

  • vue项目出现页面空白的解决方案

    今天新建项目,然后发现路由也改了  app.vue里面也是啥都没有, 但是访问http://localhost:8080/#/login  能访问  里面确实空白的 错误: 错误原因: path: '/'   只能有1个 整个项目只能有一个[但是我有了2个],然后我要重定向到login页面,我path又没配置好. 导致页面啥都出不来. 解决办法如下: 以上这篇vue项目出现页面空白的解决方案就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vue项目刷新当前页面的三种方法

    想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种: 如果希望点击确定的时候,Dialog 对话框关闭的时候,当前http://localhost:9530/#/supplier/supplierAll页面可以重新刷新下 那么表格的数据可以重新加载,Dialog 对话框设置的数据可以在确定后刷新出现在页面上 这时候我们最直接的思维就是想到下面这种: 但是,试过的会发现用vue-router重新路由到当前页面,页面是不进行刷新的,根本

  • 基于vue 动态菜单 刷新空白问题的解决

    1.先确认自己在route.js 或者 main.js 中有没有使用 路由守卫vue.beforeEach和vue.addRouters() 促使页面每次刷新,重新根据后台返回数据生成动态路由,就像你在登陆时做的事情一样. 代码示范注意点: //注意:确定自己避免了路由守卫进入死循环 let oneRun = true; //通过oneRun变量控制 避免陷入死循环 router.beforeEach((to,from,next)=>{ if(oneRun){ oneRun = false;//

  • 基于vue 动态加载图片src的解决方法

    基于vue 动态加载图片src的解决方法

    好久没更博了,最近也不知道在忙啥,反正就是感觉挺忙的,在群里看到陆陆续续有刚入vue小伙伴问vue动态加载图片总是404的状况,这篇就简单的说明为什么会出现以及解决办法有哪些. 首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src="./logo.png">和background:url(./logo.p

  • vue 导航菜单刷新状态不消失,显示对应的路由界面操作

    使用vue element-ui框架构建公共导航栏(https://element.eleme.cn/#/zh-CN/component/menu) 按F5刷新就会返回默认定义的路由,使用 "$route.path" 刷新后还是在最新的一个路由: <el-menu :default-active="$route.path"></el-menu> 补充知识:vue 动态菜单 刷新空白 解决方案 1.先确认自己在route.js 或者 main.

  • vue动态菜单、动态路由加载以及刷新踩坑实战

    vue动态菜单、动态路由加载以及刷新踩坑实战

    目录 需求: 思路: 教训: 分享正文: 总结 需求: 从接口动态获取子菜单数据 动态加载 要求只有展开才加载子菜单数据 支持刷新,页面显示正常 思路: 一开始比较乱,思路很多.想了很多 首先路由和菜单共用一个全局route, 数据的传递也是通过store的route, 然后要考虑的俩个点就是一个就是渲染菜单和加载路由,可以在导航首位里处理路由,处理刷新. 还有一个地方就是菜单组件里展开事件里面 重新生成菜单数据,路由.大体思路差不多,做完就忘了..... 刷新的问题需要用本地缓存处理,之前一直

  • vue history模式刷新404原因及解决方法

    目录 项目场景: 问题描述 原因分析: 第一步 第二步 总结 项目场景: 提示:这里简述项目相关背景: vue项目路由history模式 问题描述 提示:这里描述项目中遇到的问题: vue history模式刷新404原因 原因分析: 因为在history模式下,只是动态的通过js操作window.history来改变浏览器地址栏里的路径,并没有发起http请求,但是当我直接在浏览器里输入这个地址的时候,就一定要对服务器发起http请求,但是这个目标在服务器上又不存在,所以会返回404 解决方案

  • 基于vue hash模式微信分享#号的解决

    看代码吧~ // 问题描述在微信中分享到朋友圈或好友时,分享出去的路由被破坏,打开分享的链接,路由中的"#"会被去掉并追加?fromTimeline之类的后缀参数,这就造成了分享出去的链接只能进入首页,无法正常跳转到其他路由. // 获取签名 this.$ajax.post(this.apiUrl+"/api/wxShare/getWxConfig", this.$qs.stringify({"url":window.location.href.

  • vue 动态改变静态图片以及请求网络图片的实现方法

    在本身的项目中需要动态请求后端图片 一般需要在created中写因为beforeCreate的时候图片过不来的,如果想在这时候请求数据那么图片的地址我们就要存在一个地方.可以是本地也可以是vuex中 静态图片想要动态的添加或者改变我们需要改变图片的目录结构 把图片放在static中然后 imgUrl : ['/static/clinical.png','/static/nursing.png','/static/function.png','/static/test.png','/static/

  • 基于vue打包后字体和图片资源失效问题的解决方法

    1. vue打包后font-awesome字体失效 解决方案: 2. 打包后图片资源失效 解决方案: 针对html中引用的图片 针对css添加的背景中引用的图片 以上这篇基于vue打包后字体和图片资源失效问题的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: 解决vue打包之后静态资源图片失效的问题 vue cli使用绝对路径引用图片问题的解决 详谈vue+webpack解决css引用图片打包后找不到资源文件的问题 vue-cli中打包

  • vue :src 文件路径错误问题的解决方法

    首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src="./logo.png">和background:url(./logo.png),"./logo.png"是相对资源路径,将有webpack解析为模块依赖 static:在这个目录下文件不会被webpack处理,简单就是说存放第三方

  • SpringBoot+Vue实现动态菜单的思路梳理

    SpringBoot+Vue实现动态菜单的思路梳理

    目录 1. 整体思路 2. 前端渲染 3. 后端菜单生成 3.1 菜单表 3.2 菜单接口 关于 Spring Boot + Vue3 的动态菜单,松哥之前已经写了两篇文章了,这两篇文章主要是从代码上和大家分析动态菜单最终的实现方式,但是还是有小伙伴觉得没太看明白,感觉缺乏一个提纲挈领的思路,所以,今天松哥再整一篇文章和大家再来捋一捋这个问题,希望这篇文章能让小伙伴们彻底搞清楚这个问题. 1. 整体思路 首先我们来看整体思路. 光说思路大家还是云里雾里,我们结合具体的效果图来看: 最终菜单显示效

随机推荐