vue 3 实现动态路由 封装

在Vue 3中，实现动态路由封装可以通过使用Vue Router来完成。Vue Router是Vue.js官方提供的路由管理器，它可以帮助我们实现单页面应用（SPA）中的路由功能。

下面是一种实现动态路由封装的方法：

1. 首先，安装Vue Router。可以使用npm或者yarn命令进行安装：

npm install vue-router

2. 在项目的入口文件（通常是main.js）中引入Vue Router，并创建一个路由实例：

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'

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

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

3. 在创建路由实例时，可以通过routes选项来定义路由配置。动态路由可以通过使用路由参数来实现。例如，我们可以定义一个动态路由来匹配用户的ID：

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: User
  }
]

在上面的例子中，`:id`表示一个动态的路由参数，它可以匹配任意的ID值。

4. 在组件中使用动态路由参数。在User组件中，可以通过`$route.params`来获取动态路由参数的值：

export default {
  mounted() {
    const userId = this.$route.params.id
    // 根据userId进行相应的操作
  }
}

这样，我们就可以实现动态路由的封装了。