vue3 动态路由

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

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

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

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

// 4. 导出路由器实例
export default router;

// 在 User.vue 组件中可以这样接收参数：
<template>
  <div>
    <h1>用户详情</h1>
    <p>ID: {{ id }}</p>
  </div>
</template>

<script>
export default {
  props: ['id'], // 接收来自路由的参数
};
</script>

解释说明：

• 动态路由：在 path 中使用 :id 来定义一个动态参数，这样 /user/1 和 /user/2 都会匹配到同一个路由，但 id 的值会不同。
• props: true：将动态路由参数（如 id）作为 props 传递给组件，使得组件可以直接通过 this.id 或者 props.id 来访问这个参数。
• 组件接收参数：在 User.vue 组件中，通过 props 接收来自路由的参数，并在模板中使用。