如何在Vue 3中设置具有多个动态参数的动态路由(Vue Router)

// main.js 或 router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import User from './components/User.vue';

const routes = [
  {
    path: '/user/:id/profile/:profileId',
    name: 'UserProfile',
    component: User,
    props: true // 允许将params作为props传递给组件
  }
];

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

export default router;

// User.vue
<template>
  <div>
    <h1>User Profile</h1>
    <p>User ID: {{ userId }}</p>
    <p>Profile ID: {{ profileId }}</p>
  </div>
</template>

<script>
export default {
  props: ['id', 'profileId'],
  computed: {
    userId() {
      return this.id;
    },
    profileId() {
      return this.profileId;
    }
  }
};
</script>