在Vue 3中，动态路由通常是通过Vue Router库来实现的。你可以在路由定义时使用动态片段（:开头的参数）来创建动态路由。
以下是一个简单的例子，展示如何在Vue 3项目中使用动态路由：
首先，确保你已经安装并设置了Vue Router。
npm install vue-router@4然后，在你的Vue项目中配置路由：
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import User from './views/User.vue'
// 路由配置
const routes = [
{ path: '/', component: Home },
{ path: '/user/:id', component: User }
]
// 创建router实例
const router = createRouter({
history: createWebHistory(),
routes
})
export default router在User.vue组件中，你可以通过this.$route.params.id来获取动态片段的值：
<template>
<div>User ID: {{ $route.params.id }}</div>
</template>
<script>
export default {
// 通过路由守卫来预加载数据
async beforeRouteEnter(to, from, next) {
try {
const response = await fetch(`/api/users/${to.params.id}`)
const user = await response.json()
next(vm => vm.user = user)
} catch (e) {
next(false)
}
},
data() {
return {
user: null
};
}
}
</script>在上述例子中，当用户访问/user/123时，User组件会显示用户ID为123的信息。通过beforeRouteEnter守卫，我们可以预加载用户数据并更新组件的状态。