[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>

参考链接：
在ts+vite项目中使用path模块提示错误
vite 配置
vite项目中配置路径别名@