vue3动态路由json

Vue3中，动态路由通常用于创建可以根据URL参数变化而动态加载组件的路由。动态路由是通过在路由配置文件中使用冒号 `:` 或者问号 `?` 来表示参数的部分。JSON格式的动态路由配置可能看起来像这样：

[
  {
    path: '/users/:userId',
    name: 'UserDetail',
    component: () => import('@/views/User/UserDetail.vue'),
    // 可选的，如果需要处理参数
    meta: { requiresAuth: true },
    children: [
      {
        path: 'posts',
        name: 'PostsOfUser',
        component: () => import('@/views/User/Posts.vue')
      }
    ]
  }
]

在这个例子中，`:userId` 是一个动态参数，当访问 `/users/123` 这样的路径时，`userId` 的值会被解析为 `123` 并传递给对应的组件。

要设置动态路由，你需要在Vue Router实例初始化时使用`useRoutes`函数，并提供这个动态路由数组：

import { createRouter, createWebHistory } from 'vue-router'
import routes from './routes'

const router = createRouter({
  history: createWebHistory(),
  routes,
})