vue3动态路由

// 定义动态路由的基本示例代码

// 引入 Vue Router
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import User from './views/User.vue';

// 创建路由配置
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/user/:id', // 动态部分使用 :id 表示
    name: 'User',
    component: User,
    props: true // 将路由参数作为 props 传递给组件
  }
];

// 创建路由器实例
const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

解释说明：

1. 动态路由：在 path 中使用 :id 来表示动态部分，这意味着 /user/123 和 /user/456 都会匹配到同一个路由，并且 id 参数会被提取出来。

2. props: true：这行代码的作用是将路由参数（如 id）作为 props 传递给组件。这样你可以在组件中通过 this.$props.id 或 setup(props) 来获取这个参数。

3. 创建路由器实例：通过 createRouter 函数创建一个路由器实例，并将其导出以供应用使用。

4. history 模式：这里使用了 createWebHistory，它会在浏览器地址栏中生成真实的 URL 路径，而不是带有 # 的 hash 模式。

如果你需要更多关于如何在组件中使用这些参数的示例，请告知！