vue用addRoutes实现动态路由的示例

Vue 实现动态路由的示例 本篇文章主要介绍了使用 Vue 的 addRoutes 方法实现动态路由的示例。在之前的文章中，我们讨论了基于 Vue 实现后台系统权限控制的思路，但是在每次路由跳转的 before 钩子里做判断的方法不太"优雅"。幸运的是，vue-router 2.2 版本新增了一个 router.addRoutes(routes) 方法，让动态路由得以实现。 动态路由的实现思路是，在登录后动态添加可用路由，同时将菜单数据保存到 Vuex 或本地用于实现动态菜单。关键节点大致如下： 1. 初始路由：只有登录和404，登录后动态添加可用路由。 2. 登录逻辑：使用 axios 获取菜单数据，并将其保存到 sessionStorage 中。 3. 动态添加路由：使用 router.addRoutes 方法将可用路由添加到当前实例中。 4. 跳转到应用界面：使用 router.push 方法跳转到应用界面。 然而，动态路由也存在一些坑。第一个坑是，如果你将这套逻辑实现之后会发现打开应用看到的第一个页面是404，这是因为启动服务后将默认打开首页'/‘，然而初始路由中没有这个路径，因此根据路由规则跳转到了404。解决方法是，在用户登录之前所有请求都要指向'/login'，可以在根组件的 created 回调里判断用户是否登录。 第二个坑是，手动刷新页面又会跳到404，这是因为刷新会导致 Vue 重新实例化，路由也恢复到了初始路由，于是当前路径又被重定向到了404。解决方法是，将路由数据存储到 sessionStorage 中，并在实例化之前检测本地路由，如果检测到本地路由就直接合并路由。 使用 Vue 的 addRoutes 方法可以实现动态路由，解决了路由权限控制的问题，并且可以实现动态菜单。但是，需要注意动态路由的坑，解决方法是，在用户登录之前所有请求都要指向'/login'，并将路由数据存储到 sessionStorage 中，以便在实例化之前检测本地路由。