vue3+ts 使用router

在Vue 3和TypeScript中使用Vue Router的基本步骤如下：

1. 安装Vue Router：

npm install vue-router@4

2. 创建一个router实例并定义路由：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Home from './views/Home.vue';
 
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // 使用 `defineAsyncComponent` 来定义异步加载的组件
    component: defineAsyncComponent(() => import('./views/About.vue'))
  },
  // 更多的路由...
];
 
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});
 
export default router;

3. 在Vue应用中使用router：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
 
const app = createApp(App);
 
app.use(router);
 
app.mount('#app');

4. 在组件中使用<router-link>和<router-view>：

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

以上代码展示了如何在Vue 3和TypeScript项目中设置和使用Vue Router。这是一个基本的例子，具体的项目可能需要更复杂的配置，比如导航守卫、路由元信息等。