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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue常用传值方式、父传子、子传父及非父子实例分析
这篇文章主要介绍了Vue常用传值方式、父传子、子传父及非父子,结合实例形式分析了vue.js常见的传值方式及相关操作注意事项,需要的朋友可以参考下
2020-02-02
vue预览本地pdf文件方法之vue-pdf组件使用
这篇文章主要介绍了vue预览本地pdf文件方法之vue-pdf组件使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
Vue组件系列开发之模态框
这篇文章主要介绍了Vue组件系列开发之模态框，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-04-04
在vue项目中使用Swiper插件详解
这篇文章主要介绍了在vue项目中使用Swiper插件详解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
Vue中activated和deactivated生命周期钩子在keep-alive组件中的使用详解
Vue中keep-alive的activated和deactivated钩子用于管理缓存组件的激活与停用状态,提升性能,created初始化数据,mounted操作DOM,其他常用钩子包括beforeCreate、beforeMount、beforeUpdate、updated、beforeUnmount和unmounted
2025-07-07
Vue中如何处理token过期问题
这篇文章主要介绍了Vue中如何处理token过期问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
Vue.js axios响应拦截如何获取返回状态码
这篇文章主要介绍了Vue.js axios响应拦截如何获取返回状态码问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
vue3 组件与API直接使用的方法详解(无需import)
这篇文章主要介绍了vue3 组件与API直接使用的方法(无需import)，主要包括vue3自动导入和API的自动引入问题，本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-09-09
el-date-picker日期范围限制的实现
本文主要介绍了el-date-picker日期范围限制的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05
详解VUE项目中安装和使用vant组件
这篇文章主要介绍了VUE安装和使用vant组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04