vue3+ts+vite 路由详解

在Vue3+TypeScript+Vite项目中，路由通常由Vue Router库提供支持。以下是如何设置Vue Router的基本步骤：

1. 安装Vue Router：

npm install vue-router@4

2. 在src目录下创建一个router文件夹，并在该文件夹内创建index.ts文件。
3. 配置Vue Router：

// src/router/index.ts
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',
    // 使用懒加载
    component: () => import('../views/About.vue')
  },
  // 添加更多的路由规则...
];
 
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});
 
export default router;

4. 在main.ts中安装路由：

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

5. 在App.vue或其他组件中使用<router-view>来显示当前路由的组件：

<!-- src/App.vue -->
<template>
  <router-view></router-view>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
 
export default defineComponent({
  name: 'App'
});
</script>

以上步骤提供了一个基本的Vue Router配置，包括路由的定义和安装。在实际项目中，你可能需要根据具体需求进行更复杂的配置，例如添加导航守卫、使用嵌套路由等。