基于vuerouter3.6.0写一个动态路由

动态路由指的是可以根据一些参数或者数据动态生成的路由，Vue Router提供了很好的支持。以下是一个基于Vue Router 3.6.0的动态路由示例代码：

// 在router/index.js中定义动态路由
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/user/:id',
    name: 'User',
    component: () => import(/* webpackChunkName: "user" */ '../views/User.vue')
  },
  {
    path: '/post/:id',
    name: 'Post',
    component: () => import(/* webpackChunkName: "post" */ '../views/Post.vue')
  },
  {
    path: '/404',
    name: '404',
    component: () => import(/* webpackChunkName: "notfound" */ '../views/NotFound.vue')
  },
  {
    path: '*',
    redirect: '/404'
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

在上述示例中，我们定义了三个动态路由：

- `/user/:id` 表示用户详情页面，`:id`为动态参数，可以是任意字符串或数字，例如 `/user/123`。
- `/post/:id` 表示文章详情页面，`:id`同样为动态参数，例如 `/post/456`。
- `/404` 表示404页面。

在组件中，我们可以通过 `$route` 对象获取当前路由的动态参数：

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

在上述示例中，我们通过 `$route.params.id` 获取了当前路由的动态参数。同样的方法也适用于文章详情页面 `/post/:id`。