废话不多说,直接上代码!
let menu = store.state.menu
menu.forEach((item: any) => {
router.addRoute(
"home",
{
path: item.url,
nama:item.name,
component: () => import('@/views' + item.url + '.vue')
})
})
我这边是添加到名为 home 的路由下,也就是home的子路由,所以加了"home"
Router. ts下
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import store from '@/store/index'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'home',
component: HomeView,
},
]
如果是直接添加到路由里面的话,就可以省去这一步。 在Vue2当中是有addRouters这个方法的,这个方法可以直接把 Array 类型的数据添加进去,比较方便。但是在Vue3中省去了这个方法,只能逐个去添加。
这段代码可以在 Router.ts 文件中,亦可以在 Mine.ts 文件中存在,或者在登陆完成的时候也可以。
Store.ts
import { createStore } from 'vuex'
export default createStore({
state: {
menu:[
{url:'/one',name:'one'},
{url:'/two',name:'two'},
{url:'/three',name:'three'},
{url:'/four',name:'four'},
],
},
})
当然了,这只是一个简单地写法,在真正的发开过程中,我们可以使用 meta 路由信息表来进行配合,已达到需求。