[Vite+Vue3+TS] Router的使用

1. 安装Vue Router

npm install vue-router@4 --save

这会安装Vue Router的最新4.x版本，并将其添加到你的package.json依赖中。

2. 创建路由配置文件

在src目录下创建一个名为router的文件夹（如果尚未存在），并在该文件夹内创建一个index.js文件。这将是你的路由配置文件。

3. 配置路由

在src/router/index.ts中，配置你的路由。例如：

// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router';const routes = [{path: '/',name: 'HelloWorld',component:  () => import('@/components/HelloWorld.vue')},// 添加更多路由...
];const router = createRouter({history: createWebHistory(),routes,
});export default router;

3.1 设置路径别名(src与@)

path模块是node.js内置的功能，但是node.js本身并不支持typescript，所以需要NPM下载插件

npm install @types/node --save-dev

在vite.config.ts文件中加入别名解析

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from "path"// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],resolve: {// 配置别名alias: {'@': resolve(__dirname, './src')}},
})

接着在tsconfig.app.json文件中加入baseUrl与paths

{"compilerOptions": {"baseUrl": ".","paths": {"@/*": ["src/*"]},"composite": true,"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo","target": "ES2020","useDefineForClassFields": true,"module": "ESNext","lib": ["ES2020", "DOM", "DOM.Iterable"],"skipLibCheck": true,/* Bundler mode */"moduleResolution": "bundler","allowImportingTsExtensions": true,"resolveJsonModule": true,"isolatedModules": true,"moduleDetection": "force","noEmit": true,"jsx": "preserve",/* Linting */"strict": true,"noUnusedLocals": true,"noUnusedParameters": true,"noFallthroughCasesInSwitch": true},"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

3.1 这一步骤做完之后记得重启编辑器（VS Code），否则配置文件修改后不会生效

4. 在主应用中使用路由

在你的main.ts文件中引入并使用路由实例：

// src/main.js 或 src/main.ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'createApp(App).use(router).mount('#app');

5. 使用路由

现在你可以在你的应用中使用<router-link>组件来创建导航链接，以及<router-view>来展示路由对应的组件。
例如在main.app中使用路由出口：

<script setup lang="ts">
</script><template><div><a href="https://vitejs.dev" target="_blank"><img src="/vite.svg" class="logo" alt="Vite logo" /></a><a href="https://vuejs.org/" target="_blank"><img src="./assets/vue.svg" class="logo vue" alt="Vue logo" /></a></div><router-view></router-view> <!-- 路由出口 --></template><style scoped>
.logo {height: 6em;padding: 1.5em;will-change: filter;transition: filter 300ms;
}
.logo:hover {filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {filter: drop-shadow(0 0 2em #42b883aa);
}
</style>