Hoody's Blog
Vue Router 动态路由404

通过router.addRoutes 添加路由匹配到 path:'*' 404页面

后台项目中根据后端权限动态增加路由router.addRoutes,但是实际访问出现404

因为router.addRoutes方法是将新的路由添加到路由表的最后
而匹配规则是从列表的开始匹配到最后,只要符合表达式就判定成功,并不会找到最匹配 所以 匹配* 指向404的规则放在router.addRoutes的路由最后进行拼接

roleRoutes.concat([
  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
])
router.addRoutes(roleRoutes)

注意: 通配符 * 404规则 是否存在不会添加进路由的情况,避免出现路由无匹配进入空白页面

添加新评论,支持Markdown格式