Vue3+TypeScript 动态路由配置指南

在 Vue3 中设置动态路由需要使用 Vue Router 来进行配置。下面是一个设置动态路由的示例：

首先，安装 Vue Router。

npm install vue-router@next

在src目录下创建一个router文件夹，并在该文件夹中创建一个index.ts文件。
在index.ts文件中，导入 Vue Router 和 Vue。

import { createRouter, createWebHistory } from 'vue-router';
import { App } from 'vue';

创建一个路由配置数组，用于定义动态路由。

const routes = [
  {
    path: '/',
    component: () => import('../views/Home.vue'),
  },
  {
    path: '/about/:id',
    component: () => import('../views/About.vue'),
    props: true,
  },
];

创建一个 Vue Router 实例，并将路由配置数组传递给routes选项。

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

创建一个install方法，用于将 Vue Router 安装到 Vue 应用中。

export function install(Vue: App) {
  Vue.use(router);
}

最后，在main.ts文件中使用install方法，并将 Vue 应用作为参数传递给它。

import { createApp } from 'vue';
import { install } from './router';

const app = createApp(App);
install(app);
app.mount('#app');

现在，你就可以在About.vue组件中访问动态路由参数了。

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

<script>
export default {
  // ...
};
</script>

通过以上步骤，你就可以在 Vue3 中设置动态路由了。记得根据自己的项目需求，进行相应的配置。