vue3的自动化路由unplugin-vue-router插件详解

更新时间：2026年01月26日 14:33:29 作者：前端大波

unplugin-vue-router是一款为Vue3设计的插件,能自动生成符合VueRouter标准的路由配置,简化路由管理流程,通过自动扫描文件目录,无需手动维护路由,适合与Vite和Vue Router 5结合使用,本文介绍vue3的自动化路由unplugin-vue-router插件,感兴趣的朋友一起看看吧

什么是自动路由？

自动路由是指根据文件系统的目录结构自动生成路由配置的功能。通过约定的文件命名和目录结构，框架可以自动识别并创建对应的路由，无需手动编写路由配置。

如何使用unplugin-vue-router插件

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

安装

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

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

配置vite.congif.js

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

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

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

示例

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的功能包含进去。

到此这篇关于vue3的自动化路由（unplugin-vue-router）的文章就介绍到这了,更多相关vue内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue3 文档梳理快速入门
vue3之所以受广大袁友的喜欢，优点必不可少呀，比如：可以监听动态新增的属性；可以监听删除的属性；可以监听数组的索引和 length 属性；下面文章小编就来向大家介绍vue3，感兴趣的小伙伴不要错过奥
2021-09-09
Vue.js中NaiveUI组件文字渐变的实现
这篇文章主要介绍了Vue.js中NaiveUI组件文字渐变的实现，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-07-07
nginx配置域名后的二级目录访问不同项目的配置操作
这篇文章主要介绍了nginx配置域名后的二级目录访问不同项目的配置操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
el-table 行合并的实现示例
本文主要介绍了el-table 行合并的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
Vue3中watch的使用详解
这篇文章主要介绍了Vue3中watch的详解,主要包括Vue2使用watch及Vue3使用watch的方法，通过多种情况实例代码相结合给大家详细讲解，需要的朋友可以参考下
2022-11-11
vue实现tab路由切换组件的方法实例
这篇文章主要给大家介绍了关于vue实现tab路由切换组件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-05-05
手把手教你如何将html模板资源转为vuecli项目
Vue可以直接集成html,Vue就是前端框架,使用Vue做前端开发效率非常高,下面这篇文章主要给大家介绍了关于如何将html模板资源转为vuecli项目的相关资料,需要的朋友可以参考下
2023-04-04
vue中数据状态轮询过程
文章讲述了在Vue中实现数据状态轮询的两种方法,首先,介绍如何在页面挂载后请求数据,并根据数据状态决定是否轮询,在data中定义定时器,并在组件销毁前清空定时器以防止内存泄漏,如果无单独的状态接口,则将状态方法替换为数据方法
2025-11-11
Vue3中实现拖拽和缩放自定义看板 vue-grid-layout的方法
这篇文章主要介绍了Vue3中实现拖拽和缩放自定义看板 vue-grid-layout的方法,本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-03-03
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
本篇文章主要介绍了vue自定义全局组件并通过全局方法 Vue.use() 使用该组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-12-12