vue3之动态路由

在Vue 3中，动态路由通常是通过Vue Router库来实现的。动态路由允许我们在路由定义时使用变量来匹配不同的路径。以下是一个简单的例子：

首先，确保你已经安装并设置了Vue Router。

npm install vue-router@4

然后，在你的Vue项目中配置Vue Router并定义动态路由：

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 } // 动态路由，:id是参数
]
 
const router = createRouter({
  history: createWebHistory(),
  routes
})
 
export default router

在组件中，你可以通过this.$route.params来访问动态路由参数：

<template>
  <div>User ID: {{ $route.params.id }}</div>
</template>
 
<script>
export default {
  mounted() {
    console.log('User ID:', this.$route.params.id);
  }
}
</script>

当你导航到一个带有动态参数的路由时（例如/user/123），Vue Router会将参数传递给对应的组件，你可以在组件内部通过this.$route.params来获取这些参数。