Vue3 没addRoutes方法

Vue3 没有addRoutes方法，怎么实现router.addRoutes(routes)动态路由

因为它废弃了，像 https://www.cnblogs.com/IwishIcould/p/15940150.html 去代替实现

参考一下
https://blog.csdn.net/Noctis99/article/details/124543716

Vue3中动态路由的实现方式与Vue2略有不同。Vue3中没有addRoutes方法，取而代之的是使用异步组件和路由懒加载的方式来实现动态路由。

具体实现如下：

在路由配置文件中，使用动态导入（即路由懒加载）的方式加载需要动态生成的组件。例如：

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue')
  },
  {
    path: '/dynamic',
    name: 'Dynamic',
    component: () => import('@/views/Dynamic.vue')
  }
]

在需要动态生成路由的地方（例如后台管理系统中），通过异步加载的方式获取需要添加的路由配置。例如：

const routes = await fetchRoutes() // 通过异步加载获取需要添加的路由配置
router.addRoutes(routes)

注意：在使用异步组件和路由懒加载的方式时，需要在webpack的配置文件中设置chunkFilename。例如：

// vue.config.js
module.exports = {
  configureWebpack: {
    output: {
      chunkFilename: '[name].[chunkhash].js'
    }
  }
}

这样就可以在Vue3中实现动态路由的功能了。通过异步组件和路由懒加载的方式，我们可以更加灵活地生成和管理路由，为开发带来更好的体验。