vue动态路由

vue动态路由

addRoutes添加的动态页面刷新后进入404页面解决方案

这名字真的很长很长啊~！！！长名字没人看，百度关键词也不好抓，怪不得那些自媒体标题写的一个比一个惊悚。

---

---

问题

1. 起因
   因为某个功能的上线与否由后台接口决定，而这个功能可能不止一个页面，我们希望每次用户打开页面前，都能调用这一接口确定这个功能是否已经启用，若启用则直接打开相关页面，若未启用则不显示相关页面，直接跳转入404通配符设置的页面。很显然，这个功能很类似登录权限控制的问题，只不过比登录简单多了，登录还要区分角色什么的。

2. 简述
   就是根据后台接口动态设置路由。

3. 概述
   使用 router.addRoutes 后生成的动态路由，经过刷新后，新添加的路由还没有挂载到vue实例之上，这个时候直接进入路由查找，是找不到我们之前新加入的路由的，由此进入了通配符页面（通常是404页）。

解决方案

1. 在参考了大神花裤衩注意事项：
   
   提醒之后，我尝试将404的通配符设置放置在addRoutes之内，果然好用。但是还有一个问题，若后台接口返回false，即不开启相关功能，我的404岂不是要永远失去了。

2. 所以这里需要加入判断，代码类似下面这样：

   

3. 使用方法
   在 router/index.js 的 export default router; 前添加 Login.setAsyncRoutes(); 执行此函数。

参考链接

我们之所以看得远，是因为站在了巨人肩膀上。感谢

[1] vue-router. router.addRoutes
[2] 花裤衩. 手摸手，带你用vue撸后台 系列二(登录权限篇)