Vue-Router v5内置文件式路由，告别手写维护的恐惧

大家好，我是农村程序员，独立开发者，前端之虎陈随易，技术群与交朋友请在个人网站 👇 联系我 ✌️

个人网站 1️⃣：chensuiyi.me
个人网站 2️⃣：me.yicode.tech

我的所有文章均为古法手写，无 AI 添加剂，请放心食用，如果你觉得本文有用，一键三连 (点赞、评论、转发)，就是对我最大的支持~

先说个题外话，现在的 AI 真是方便，比如这篇文章，我好几次忍不住想用 AI 来直接搞定，但最终还是忍住了。

正如文章开头的承诺，古法手写，无AI添加剂，还是尽可能地去创造有温度，有人味的东西，尽管可能并不如 AI 那么详细，完美。

但手写的过程，也是自己理解的过程。在其位，谋其职，作为一个程序员，用心去触摸技术的更新和发展，本就是一个令人陶醉的事情。

本文分享Vue Router v5版本将要带来的一些变化。

作为 Vue 生态的三剑客Vue、Vue-Router、Pinia之一，Vue-Router一直在 Vue 项目中提供了良好的体验和作用，尽管 Vue3 带来的Hook在一定程度上可以替代 Pinia，甚至有人沾沾自喜：我不用Pinia也能实现同样的功能。

在我看来，这无异于在 Git 可视化操作如此繁荣方便的今天，只会git add、git commit、git push 三板斧的选手们陶醉于我可以在炫酷的终端使用 git 命令行的沾沾自喜之中。

不好意思，跑题了，也说明了这确实不是 AI 写的文章，仅仅只是对这个现象吐个槽。

Vue-Route v5的最大变化，应该就是内置了unplugin-vue-router，让文件式路由开箱即用。

js 复制代码

export const constantRoutes = [
    {
        path: '/redirect',
        component: Layout,
        hidden: true,
        children: [
            {
                path: '/redirect/:path(.*)',
                component: () => import('@/views/redirect/index')
            }
        ]
    },

    {
        path: '/',
        component: Layout,
        redirect: '/dashboard',
        children: [
            {
                path: 'dashboard',
                component: () => import('@/views/dashboard/index'),
                name: 'Dashboard',
                meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
            }
        ]
    }
];

那么什么是文件式路由呢？简单点说就是，我们可以告别手动写路由配置的时代了，还记得被手写路由支配的恐惧吗？

bash 复制代码

src/pages/
├── index.vue
├── about.vue
└── users/
    ├── index.vue
    └── [id].vue
└── users.vue

那么文件式路由是什么呢？也就是我们只需要创建页面。

js 复制代码

const routes = [
    {
        path: '/users',
        component: () => import('src/pages/users.vue'),
        children: [{ path: '', component: () => import('src/pages/users/index.vue') }]
    }
];

就能自动生成根据文件目录结构相匹配的路由了。

当然，就算是手写路由时代，也可以直接安装unplugin-vue-router这个依赖来实现文件式路由的功能，但这跟集成到Vue-Router自身的区别还是很大的，这就像在现在 AI 大行其道的当下，还有多少人依旧没有用 AI 写过代码呢。

而在官方下场助推下，相信文件式路由的理念应该会被越来越多的人所了解和使用，想到此处，我依稀还能记起几年以前维护一个 300 多个路由文件的头大。

bash 复制代码

pnpm remove unplugin-vue-router # 删除 unplugin-vue-router
pnpm update vue-router@5 # 安装 update vue-router@5

如果想尝鲜的朋友，按照如上方式安装 Vue-Router 的第 5 个版本。

JS 复制代码

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

// 现在
import VueRouter from 'vue-router/vite'

修改导入方式。

JS 复制代码

// 之前
import { defineBasicLoader } from 'unplugin-vue-router/data-loaders/basic'
import { defineColadaLoader } from 'unplugin-vue-router/data-loaders/pinia-colada'
import { DataLoaderPlugin } from 'unplugin-vue-router/data-loaders'

// 现在
import { defineBasicLoader, DataLoaderPlugin } from 'vue-router/experimental'
import { defineColadaLoader } from 'vue-router/experimental/pinia-colada'

调整对应函数的导出路径。

js 复制代码

// 之前
import { VueRouterAutoImports, EditableTreeNode, createTreeNodeValue, createRoutesContext, getFileBasedRouteName, getPascalCaseRouteName } from 'unplugin-vue-router';

// 现在
import { VueRouterAutoImports, EditableTreeNode, createTreeNodeValue, createRoutesContext, getFileBasedRouteName, getPascalCaseRouteName } from 'vue-router/unplugin';

调整相关方法的导出路径。

JS 复制代码

// 之前
import type { Options, EditableTreeNode } from 'unplugin-vue-router'

// 现在
import type { Options, EditableTreeNode } from 'vue-router/unplugin'

调整类型的导出。

js 复制代码

// 之前 (tsconfig.json)
{
  "compilerOptions": {
    "rootDir": "."
  },
  "vueCompilerOptions": {
    "plugins": [
      "unplugin-vue-router/volar/sfc-typed-router",
      "unplugin-vue-router/volar/sfc-route-blocks"
    ]
  }
}

// 现在
{
  "compilerOptions": {
    "rootDir": "."
  },
  "vueCompilerOptions": {
    "plugins": [
      "vue-router/volar/sfc-typed-router",
      "vue-router/volar/sfc-route-blocks"
    ]
  }
}

Volar 插件的配置调整。

js 复制代码

// 之前
{
  "include": ["./typed-router.d.ts", "unplugin-vue-router/client"]
}

// 现在
{
  "include": ["./typed-router.d.ts"]
}

tsconfig.json 配置文件的调整。

解放双手，释放大脑，让文件式路由走进千家万户。