我就废话不多说了，大家还是直接看代码吧~
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const createRouter = () => new Router({
mode: 'history',
routes: []
})
const router = createRouter()
export function resetRouter () {
const newRouter = createRouter()
router.matcher = newRouter.matcher //
在Vue.js应用中，路由管理是一个关键组成部分，特别是在构建大型单页应用时。Vue Router是官方推荐的路由库，它提供了强大的路由配置和管理功能。本文将深入探讨如何解决在Vue应用中使用`addRoutes`多次添加路由导致的重复问题。
我们需要了解Vue Router的基本用法。Vue Router通过`import`引入并使用`Vue.use(Router)`注册到Vue实例中。创建一个路由器实例通常涉及定义`routes`数组，包括各个路由路径、组件和元信息等。例如：
```javascript
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
mode: 'history',
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
})
```
当涉及到动态添加路由时，比如在用户登录后根据其权限动态加载路由，可以使用`router.addRoutes()`方法。但问题在于，如果多次调用`addRoutes`，可能会导致相同的路由被多次添加，从而造成路由重复。为了解决这个问题，我们可以采取以下策略：
1. **重置路由器实例**：在`resetRouter`函数中，我们创建了一个新的路由器实例`newRouter`，然后将新实例的`matcher`属性赋值给原来的路由器实例。`matcher`是用于解析和匹配URL的内部对象，这样做的目的是保留已存在的路由配置，同时替换掉路由列表。当需要清除已添加的动态路由时，调用`resetRouter`即可。
```javascript
const createRouter = () => new Router({ mode: 'history', routes: []})
const router = createRouter()
export function resetRouter () {
const newRouter = createRouter()
router.matcher = newRouter.matcher
}
```
2. **权限管理**：在权限管理场景下，通常会在用户登录时根据返回的权限列表动态添加路由。为了确保刷新页面后权限仍然有效，可以将用户权限信息存储在`sessionStorage`或`localStorage`中。在全局路由守卫`beforeEach`中检查是否存在这些权限，如果不存在，则从存储中恢复或重新请求权限并动态添加路由。
```javascript
router.beforeEach((to, from, next) => {
const list = store.getters.permissionList // 假设store中存在permissionList
if (!list) {
// 从sessionStorage或重新请求权限
fetchPermissionList().then(res => {
store.dispatch('setPermissionList', res.data)
const newRoutes = generateRoutesFromPermission(res.data) // 根据权限生成路由
router.addRoutes(newRoutes)
next()
})
} else {
next()
}
})
```
3. **路由守卫**：Vue Router提供的导航守卫可以防止未授权的用户访问特定路由。例如，可以设置一个全局守卫检查用户是否已登录和具有相应的权限，否则重定向到登录页面。
4. **异步处理**：在动态添加路由时，由于涉及到与后端交互，通常会遇到异步操作。确保在等待异步操作完成后再执行`addRoutes`，可以使用Promise或者async/await语法来处理。
解决Vue中`addRoutes`重复添加路由的问题，主要思路是通过重置路由器实例、合理管理权限和使用路由守卫。同时，确保在刷新页面时能恢复动态路由，并处理好异步操作，以保证应用的正常运行和用户体验。
- 1
- 2
前往页