vue路由刷新404问题~

你们好,我是金金金。

场景

  • 侧边栏点击菜单,渲染对应路由页面没有任何问题,当我刷新浏览器出现404(这种情况只出现在动态路由上,静态路由刷新没问题)

排查

我先贴一下代码

  • 路由守卫代码
  • 静态路由代码
  • 动态路由代码

当只有选中动态路由 渲染出来的菜单时候刷新浏览器才会404,我猜想是不是因为没匹配上路由导致?

  1. 首先排查路由守卫 ,当我点击了一个动态路由渲染出的菜单时,刷新页面时发现matched为空,难怪一直404,原来如此!原因:因为当页面刷新时,路由数据也被清空了,此时路由数据里面只有静态路由的数据,动态路由的数据还没push进来,这也就是为什么静态路由刷新没事,动态路由刷新404的原因。
  2. 我们把这行代码注释,我发现,刷新依旧如此还是404
  3. 通过第二点可以看到,为什么to.path直接变成404了呢?接着我在点击侧边栏的时候输出了一下路由数据
  • 问题已经浮现了,原因就是/:pathMatch(.*)*没在最后一个,导致/system/roles路径先匹配上/:pathMatch(.*)*导致404,咱们把/:pathMatch(.*)*放在最后一个路由即可!!!

造成error的原因

  1. 路由守卫当中的to.matched为空数组导致
  2. /:pathMatch(.*)*未写在路由的最后

解决

  1. 注释掉路由守卫的to.matched这行代码
  2. /:pathMatch(.*)*放在动态路由的最后面
  • 已经测试,刷新正常!

总结

  1. 因为浏览器在刷新时,路由数据也被清空了,此时如果是动态路由的话,路由守卫当中的to.matched此时肯定为空数组(因为动态路由此时还未加载上),所以导致404
  2. /:pathMatch(.*)*没放在路由的最后一个 导致还没匹配完所有的路由就被匹配上从而重定向到404页面了。
  • 编写有误还请大佬指正,万分感谢。
相关推荐
拉不动的猪4 分钟前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程14 分钟前
如何测试短信接口
java·服务器·前端
安冬的码畜日常37 分钟前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
小杨升级打怪中42 分钟前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木1 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师1 小时前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
袈裟和尚1 小时前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑
曹牧1 小时前
HTML字符实体和转义字符串
前端·html
小希爸爸1 小时前
2、中医基础入门和养生
前端·后端
局外人LZ1 小时前
前端项目搭建集锦:vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展,开箱即用,附带项目搭建教程
前端·vue.js·react.js