vue2在vuex中动态添加路由
时间: 2023-10-17 09:07:43 浏览: 139
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
在Vuex中添加路由,需要先在router/index.js中定义一个空的路由,然后在Vuex中动态添加路由。
1. 在router/index.js中定义一个空的路由:
```
const router = new VueRouter({
routes: []
})
```
2. 在Vuex的actions中添加路由:
```
const actions = {
addRoute({ commit }, route) {
router.addRoutes([route])
commit('ADD_ROUTE', route)
}
}
```
3. 在Vuex的mutations中更新路由列表:
```
const mutations = {
ADD_ROUTE(state, route) {
state.routes.push(route)
}
}
```
4. 在组件中调用Vuex的action来动态添加路由:
```
this.$store.dispatch('addRoute', {
path: '/new-route',
component: NewRouteComponent
})
```
5. 最后,在router-view中渲染动态添加的路由:
```
<router-view v-if="$route.meta.dynamicRoute" />
```
阅读全文