vue3 ts 使用router

Vue 3 和 TypeScript 结合使用时，使用 Vue Router 的方式与之前的版本相似。下面是在 Vue 3 中使用 TypeScript 和 Vue Router 的步骤：

1. 首先，确保你已经安装并配置了 Vue 3 和 TypeScript。
2. 安装 Vue Router：在项目根目录下执行以下命令：

   npm install vue-router@next

3. 在你的入口文件（通常是 `main.ts`）中引入 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');

4. 在路由配置文件中（通常是 `router.ts`），定义你的路由：

   import { RouteRecordRaw } from 'vue-router';
   import Home from './views/Home.vue';
   import About from './views/About.vue';

   const routes: Array<RouteRecordRaw> = [
     {
       path: '/',
       name: 'Home',
       component: Home,
     },
     {
       path: '/about',
       name: 'About',
       component: About,
     },
   ];

   export default routes;

5. 在组件中使用路由：在需要使用路由的组件中，可以通过 `<router-link>` 和 `<router-view>` 来实现导航和渲染视图。

- `<router-link>` 用于生成导航链接，例如：

     <router-link to="/">Home</router-link>
     <router-link to="/about">About</router-link>

- `<router-view>` 用于渲染对应的组件视图，例如：

     <router-view></router-view>

这样，你就完成了在 Vue 3 和 TypeScript 中使用 Vue Router 的配置。你可以根据自己的需要进一步定义和配置路由，以实现更复杂的导航和页面切换逻辑。