vue3结合动态路由

Vue3与动态路由的结合非常简单，你可以使用Vue Router来实现动态路由。

首先，确保你已经安装了Vue Router。你可以通过以下命令来安装：

npm install vue-router@next

然后，在你的Vue应用程序的入口文件中，创建一个路由器实例并配置路由规则。以下是一个简单的示例：

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/user/:id', // 动态路由参数
    component: User
  }
]

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

const app = createApp(App)
app.use(router)
app.mount('#app')

在上面的示例中，我们定义了三个路由规则：一个根路径'/'，一个'about'路径和一个带有动态参数的'user/:id'路径。当用户访问'/user/1'时，将会渲染User组件。

在User组件中，可以通过$route对象获取动态路由参数。例如：

<template>
  <div>
    <h1>User ID: {{ $route.params.id }}</h1>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$route.params.id) // 输出动态路由参数
  }
}
</script>

通过上述步骤，你就可以将Vue3与动态路由相结合了。当用户访问不同的路径时，Vue Router会自动渲染相应的组件，并将动态路由参数传递给组件使用。