vue3通过addRouter实现动态路由（添加为指定路由的子路由）

废话不多说，直接上代码！

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 路由信息表来进行配合，已达到需求。