😡😡😡早知道有这两个 VueRouter 增强插件，我还加什么班！🚀🚀🚀

前言

昨天介绍了一些 pinia 库，今天迫不及待的来介绍一些今天发现的两个 Vue Router 神器，它们可以用更少的配置、更高的效率构建复杂路由系统！

往期精彩推荐

🔥🔥🔥MCP TypeScript SDK 初体验：挑战快速搭建一个 AI 应用！
💎这么做，cursor 生成的代码更懂你！💎
🚀🚀🚀 这六个事半功倍的 Pinia 库，你一定要知道！
更多精彩文章欢迎关注我的公众号：萌萌哒草头将军

正文

1. unplugin-vue-router

地址：https://github.com/posva/unplugin-vue-router

unplugin-vue-router是一个基于文件系统的类型安全路由插件，为 Vue Router 提供下一代自动化解决方案。

它可以自动扫描 src/pages 文件夹生成路由配置

也提供 TypeScript 类型提示，路径、参数完全类型安全，

并且支持嵌套路由、动态参数、异步加载等复杂场景，

而且与 Vite、Webpack、Rollup 构建工具兼容，支持生成 loader（实验功能）用于服务端数据预加载。

特别适合中大型项目，特别是追求类型安全和结构规范的团队。

bash 复制代码

npm i -D unplugin-vue-router

ts 复制代码

// vite.config.ts
import VueRouter from 'unplugin-vue-router/vite'

export default defineConfig({
  plugins: [
    VueRouter({
      /* options */
    }),
    // ⚠️ Vue must be placed after VueRouter()
    Vue(),
  ],
})

你也可以使用 vue-router/auto-routes 来配合 unplugin-vue-router 自动生成路由配置！

它可以让你直接通过src/pages 目录中生成路由，无需手动配置路由数组。

适合需要快速集成、快速原型开发或不想写重复路由配置的项目，非常适合中小型项目，或是对开发效率要求较高的场景。

ts 复制代码

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

if (import.meta.hot) { 
  handleHotUpdate(router) 
}

2. vue-router-layouts

地址：https://github.com/JohnCampionJr/vite-plugin-vue-layouts

vue-router-layouts 是一个 layout 插件，常与 vite-plugin-pages 或 unplugin-vue-router 结合使用，用于实现页面级布局功能。

它可以自动识别页面组件中的 layout 配置，并将对应 layout 应用于页面渲染。

同时支持默认 layout、嵌套路由 layout 和动态 layout，可以应对后台系统等复杂布局需求。

通过 setupLayouts 方法与生成的路由集成后，即可自动插入布局逻辑，减少样板代码和人为出错的可能。

特别适合需要多布局切换或页面结构复杂的中大型应用。

bash 复制代码

npm install -D vite-plugin-vue-layouts

ts 复制代码

// vite.config.ts
import Vue from '@vitejs/plugin-vue';
import Pages from 'vite-plugin-pages';
import Layouts from 'vite-plugin-vue-layouts';

export default {
  plugins: [Vue(), Pages(), Layouts()],
};

ts 复制代码

import { createRouter } from 'vue-router'
import { setupLayouts } from 'virtual:generated-layouts'
import generatedRoutes from '~pages'
const routes = setupLayouts(generatedRoutes)
const router = createRouter({
  // ...
  routes,
});

最后

如果你在构建一个 Vue 应用，不妨选择适合自己的路由增强工具来给自己的开发加速！

今天的分享就这些了，感谢大家的阅读，如果文章中存在错误的地方欢迎指正！

往期精彩推荐

🔥🔥🔥MCP TypeScript SDK 初体验：挑战快速搭建一个 AI 应用！
💎这么做，cursor 生成的代码更懂你！💎
🚀🚀🚀 这六个事半功倍的 Pinia 库，你一定要知道！
更多精彩文章欢迎关注我的公众号：萌萌哒草头将军