Vue3中的动态路由

在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守卫，我们可以预加载用户数据并更新组件的状态。