vue3路由跳转传参接受

在 Vue 3 中，你可以通过路由参数来传递数据并接收它们。以下是一个示例：

1. 首先，在路由配置中定义一个带有参数的路由：

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
import UserDetails from './views/UserDetails.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/user/:id',
    name: 'UserDetails',
    component: UserDetails,
    props: true
  }
];

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

export default router;

2. 在组件中，可以通过 `props` 接收路由参数：

<template>
  <div>
    <h2>User Details</h2>
    <p>ID: {{ id }}</p>
  </div>
</template>

<script>
export default {
  props: ['id'],
  mounted() {
    console.log(this.id); // 在控制台中输出路由参数
  }
}
</script>

3. 在路由跳转时，通过 `router-link` 或 `router.push` 传递参数：

<template>
  <div>
    <!-- 使用 router-link 传递参数 -->
    <router-link :to="{ name: 'UserDetails', params: { id: 1 } }">User 1</router-link>
    
    <!-- 使用 router.push 传递参数 -->
    <button @click="goToUser(2)">User 2</button>