vue3+vite+js中动态路由如何使用router.addRoute添加数据

在 Vue3 + Vite + Vue Router 4 中，可以使用 `router.addRoute()` 方法动态添加路由。

假设我们需要在 `/users` 页面下动态添加一个子路由 `/users/:id`，你可以这样做：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/users',
      component: Users
    }
  ]
})

// 在 /users 路由下动态添加路由
router.addRoute('users', {
  path: '/users/:id',
  component: UserDetail
})

`router.addRoute()` 方法的第一个参数是要添加路由的父级路由的路径，第二个参数是包含路由配置对象的完整路由对象。

另外，如果你需要在运行时动态删除路由，也可以使用 `router.removeRoute()` 方法。例如，我们要删除上面示例中添加的 `/users/:id` 子路由，可以这样做：

router.removeRoute('users', 'userDetail')

`router.removeRoute()` 方法的第一个参数是父级路由的路径，第二个参数是要删除的路由的名称（在路由配置对象中定义的 `name` 属性）或者路径（在路由配置对象中定义的 `path` 属性）。