不再需要為每一個路由編寫冗長的 routes 配置啦，新建文件便可自動生成路由！

使用方法

1. 安裝 unplugin-vue-router

npm i -D unplugin-vue-router

2. 修改 vite 配置

vite.config.ts

import VueRouter from 'unplugin-vue-router/vite'

plugins 中加入 VueRouter ，注意其必須在 vue() 之前

  plugins: [// VueRouter  必須在 vue() 之前VueRouter({}),vue(),vueJsx(),vueDevTools()],

3. 修改路由配置

src/router/index.ts

import { createRouter, createWebHistory } from 'vue-router'
import { routes } from 'vue-router/auto-routes'
const router = createRouter({history: createWebHistory(),routes
})
export default router

src/App.vue 中為

<template><RouterView />
</template>

• 組件 RouterView 和 RouterLink 都是全局注冊的，因此無需導入。見官網

自動路由規則

默認情況下，會為 src/pages 中的文件自動創建路由（可以通過配置修改為其他目錄，但不建議這么做）

推薦的頁面目錄結構 ：

自動路由效果為 ：

路由	文件
/	pages/index.vue
/about	pages/about.vue
/users	pages/users/index.vue
/users/1	pages/users/[id].vue
/other	pages/[…404].vue

• index.vue 的路由為 / 不是 /index
• [id].vue 會得到動態路由，與 vue-router 中的 /:id 效果相同

比如 [id].vue 的內容為

<script setup lang="ts">
import { useRoute } from 'vue-router'
const route = useRoute()
</script><template><div>用戶詳情</div><p>id:{{ route.params.id }}</p>
</template><style scoped lang="scss"></style>

則訪問 http://localhost:5173/users/1 的效果為：

用戶詳情
id:1

• […404].vue 用于匹配所有不存在的路由，內容通常為 404 頁面。

<template><div>404</div>
</template>

[...404].vue 中的 404 也可以自定義為任意其他的字符串，如 path，all 等，效果一樣，此處為了方便識別為 404 頁面，用的 404。

自定義路由

當自動路由無法滿足需求時，可以參考下方代碼自定義路由

src/router/index.ts

import { createRouter, createWebHistory } from 'vue-router'
import { routes } from 'vue-router/auto-routes'
const router = createRouter({history: createWebHistory(),routes: [...routes,// 自定義配置路由 /test ，訪問文件 src/views/test.vue{path: '/test',component: () => import('@/views/test.vue')}]
})
export default router

更多配置和用法見官網

https://uvr.esm.is/guide/configuration.html