vue3的自动化路由（unplugin-vue-router）

前端大波2026-01-24 18:28

如何使用unplugin-vue-router插件

unplugin-vue-router 是一款专门为vue3设计的插件，旨在简化路由管理流程（类似nuxt）。它可以通过自动扫描文件目录，从而自动生成符合 Vue Router 标准的路由配置，从而让我们免去手动维护路由。

安装

在确保安装了 vue-router 的情况下，执行以下命令

javascript 复制代码

npm install unplugin-vue-router --save-dev

配置vite.congif.js

javascript 复制代码

import { defineConfig } from 'vite'
import VueRouter from 'unplugin-vue-router/vite'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig({
  plugins: [VueRouter({
		routesFolder: ['src/views'],// 这里如果不填，默认是 src/pages
	}), vue()],
})

配置router/index.js

javascript 复制代码

import { createRouter, createWebHistory } from 'vue-router'
import { routes } from 'vue-router/auto-routes'

export const router = createRouter({
  history: createWebHistory(),
  routes
})

main.js中正常引入 router 即可使用啦。

示例

javascript 复制代码

src/
├── views/
│   ├── index.vue         // 对应 "/"
│   ├── about.vue         // 对应 "/about"
│   ├── user/
│       ├── [id].vue      // 对应 "/user/:id"
│       └── profile.vue   // 对应 "/user/profile"
│       └── index.vue   // 对应 "/user"

另外提醒大家多关注 vue-router5,vue-router5版本会把unplugin-vue-router的功能包含进去。