Vue.js 自动路由：告别手动配置，让开发更轻松！

在使用 Vue.js 开发项目的时候，我最头疼的就是创建路由，尤其是项目越来越大的时候，管理 route.ts 或 route.js 文件简直是一场噩梦！

我曾经做过一个页面超级多的项目，每新增一个页面就要更新路由，删除页面也要更新路由文件，不然就会报错，真是烦死人了！

所以，我开始寻找自动生成路由的方法。我在网上搜了很久，但大部分结果都是针对 Webpack 和 Vue 2 的，很难找到适合我的方案。最后，我在 Vue 的 GitHub 仓库的讨论区里提问，终于找到了答案！

那就是 Unplugin Vue Router！ 它可以为 Vue 3 实现基于文件的自动路由，而且支持 TypeScript，设置起来也超级简单！ 虽然官方说它还在实验阶段，但用起来已经很方便了。

创建项目，安装插件

首先，我们创建一个新的 Vue 项目。 相信大家都很熟悉用 Vue CLI 创建项目了，这里就不赘述了，不熟悉的小伙伴可以去看看 Vue.js 官网的快速入门指南。

pnpm create vue@latest 

我创建项目的时候选择了 TypeScript 和 Vue Router，这样它就会自动生成一些页面和路由。

然后，进入项目目录，安装依赖。我最近开始用 pnpm 来管理依赖，感觉还不错。

pnpm add -D unplugin-vue-router 

接下来，更新 vite.config.ts 文件， 注意要把插件放在第 0 个位置 。

import { fileURLToPath, URL } from "node:url";
import VueRouter from "unplugin-vue-router/vite";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
plugins: [
VueRouter({
/* options */

    }),
// ⚠️ Vue must be placed after VueRouter()
vue(),

  ],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),

    },

  },


}); 

然后，更新 env.d.ts 文件，让编辑器能够识别插件的类型。

/// <reference types="vite/client" />
/// <reference types="unplugin-vue-router/client" /> 

最后，更新路由文件 src/router/index.ts 。

import { createRouter, createWebHistory } from "vue-router";
import { routes, handleHotUpdate } from "vue-router/auto-routes";

const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),

  routes,

});

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

}

export default router; 

创建页面，自动生成路由

现在，我们可以创建 src/pages 目录了，在这个目录下创建的 Vue 组件会自动变成路由和页面，就像 Nuxt 一样方便！

我们先在 src\pages\about.vue 创建一个关于页面：

<template>

    <div>This is the about page</div>

</template> 

然后在 src\pages\index.vue 创建首页：

<template>

    <div>This is Home Page</div>

</template> 

运行 pnpm dev 启动开发服务器，点击 “Home” 链接就会跳转到首页，点击 “About” 链接就会跳转到关于页面。

怎么样，是不是很方便？ 如果你不熟悉路由文件夹结构，可以看看这个文档： uvr.esm.is/guide/file-…

动态路由

我们再来试试创建带参数的动态路由。在 src/pages/blog/[id].vue 创建一个组件，内容如下：

<script setup>

const { id } = useRoute().params;

</script>

<template>

    <div>This is the blog post with id: {{ id }}</div>

</template> 

再次运行 pnpm dev ，然后访问 http://localhost:5173/blog/6 ，你就会看到以下内容：

是不是很神奇？ 希望这篇简短的博客能帮助你在 Vue.js 的旅程中更轻松地创建路由！