vue 动态添加路由之后一直显示404的问题

菜鸟工程师2号

于 2019-11-07 14:44:00 发布

阅读量3.3k

点赞数 1

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_43368335/article/details/102954802

版权

本文介绍在动态添加路由后，如何手动配置404重定向至自定义错误页面，确保用户不会遇到未捕获的404错误，通过在Vue.js应用中使用Vuex和Vue Router实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当我们动态添加路由之后需要手动添加404重定向的路由否则页面会一直404
如下

// get user info
const { pagesIndex } = await store.dispatch('user/getUserInfo');
// 匹配路由
const accessRoutes = await store.dispatch('permission/generateRoutes', pagesIndex)
// 添加动态路由 
router.addRoutes(accessRoutes.concat([{
  path: "*",
  redirect: "/404"
}]))
// hack method to ensure that addRoutes is complete
// set the replace: true, so the navigation will not leave a history record
next({ ...to, replace: true })