vue-router动态路由设置自定义首页

需求：胚子为vue-element-template做了些许改动，项目分为管理端和客户端，管理端设置好用户并 且可以支持用户自定义选择展示的首页，客户端用户进入主页时直接显示客户设置的对应首页

实现：1.首先设置好静态路由，设置好根路径，即刚进入页面路径为'/'的重定向页面，以此触发路由全局 守卫，判断没有token进入登陆页面。

{

path:'/',

redirect:'/dashBoard'

}

2.遇到问题点：因为首页是用户自定义的，所以在对后端请求来的数据除了需要使用递归处理成路 由的数组结构还要用自定义的首页ID查询出对应的首页路由，（我这里是记录了对应的name方 便后续跳转使用），最后在递归函数的末尾往动态路由再push一个路由规则，我这里写成

{

path:'/index',

redirect:{name:首页name}

}

3.登录跳转时路径需要更改成router.push('/index'),permission.js里判断有token跳转到登录页 时需要限制跳转到'/index',这样就可以实现

4.如果用户没有登出操作，那么token会持续一段时间生效，那么刚进来时进入的路径'/'是不做限 制的，这时会发现跳转到了'/dashBoard'，所以这里需要做调整，如果进入的to.path是

'/dashBoard'则强制跳转到'/index'

总结：使用了重定向以及静态路由和动态路由，之前一直想更改静态路由里面'/'的重定向，显然不合理，静态路由在初始化页面时就已经挂载好，后续更改时比较麻烦。所以另辟蹊径，因为动态路由是后续router.addRouter添加到路由中去，所以可以在这里定义规则以及重定向跳转到的自定义首页。

注意点：'/'的重定向路径不能是'/index'，不然路由匹配的优先级会有影响。（至此实现对应功能，我是这样实现的，欢迎一起探讨~）