废话不多说,直接上代码!
let menu = store.state.menumenu.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 路由信息表来进行配合,已达到需求。