【笔记】通过vuex管理router

简介: 通过vuex管理router

src/store/modules/route.js

import layout from '@/views/layout/index.vue'
import router from '@/router'

let routes = [{
    path: '/',
    component: layout,
    redirect: 'index',
    children: [{
        path: '/xxx',
        name: 'xxx',
        component: () => import('@/views/xxx/XXX.vue'),
        meta: {
            title: 'XXX',
            noCache: true
        }
    }]
},
...
]
export const authRoutes = [{}]
export default {
    state: {
        routes: routes
    },
    actions: {
        add_route({ commit }, data) {
            commit('Add_ROUTE', data)
        }
    }
}

src/store/getters.js

export default {
    ...
    routes: state => state.toute.routes
    ...
}

src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

import route from '@store/modules/route.js'
import getters from '@store/getters.js'
Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        route,
        ...
    },
    getters
})

src/router/index.js:

import Vue from 'Vue'
import Router from 'vue-router'
import store from '@store/index'

Vue.use(Router)

export default new Router({
    // mode: ''hash,
    routes: store.getter.routes
})
相关文章
|
29天前
|
资源调度 前端开发 测试技术
React Router 路由管理
【10月更文挑战第10天】本文介绍了 React Router,一个在 React 应用中管理路由的强大工具。内容涵盖基本概念、安装与使用方法、常见问题及解决方案,如路由嵌套、动态路由和路由守卫等,并提供代码示例。通过学习本文,开发者可以更高效地使用 React Router,提升应用的导航体验和安全性。
177 19
|
19天前
|
资源调度 JavaScript 前端开发
路由管理:Vue Router的使用和配置技巧
【10月更文挑战第21天】路由管理:Vue Router的使用和配置技巧
30 3
|
存储 缓存 JavaScript
Pinia+Router学习笔记(十一)
本节记录嵌套路由&命名视图相关内容
118 0
|
前端开发
Pinia+Router学习笔记(十五)
本节记录Vue-Router中关于路由滚动行为的相关内容
78 0
Pinia+Router学习笔记(十二)
本节记录Vue-Router的两种路由重定向方式
122 0
Pinia+Router学习笔记(十四)
本节记录Vue-Router中路由过渡动效相关内容
109 0
|
前端开发 网络架构
Pinia+Router学习笔记(十六)
本节记录Vue-Router中动态路由相关内容
192 0
|
网络架构
Pinia+Router学习笔记(十)
本节记录Vue-Router的两种路由传参方式
179 0
|
存储
Pinia+Router学习笔记(六)
从本节开始进入Router学习,先介绍下Vue-Router的基本配置
82 0