vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue文件自动生成路由

vue文件自动生成路由的实现方法

作者：ashuicoder

vue-router悄悄发布了5.0版本,用官方的话说,V5 是一个过渡版本,它将unplugin-vue-router（基于文件的路由）合并到了核心包中,就是说V5版本直接支持基于文件自动生成路由了,下面就来详细的介绍一下

vue-router悄悄发布了5.0版本，用官方的话说，V5 是一个过渡版本，它将unplugin-vue-router（基于文件的路由）合并到了核心包中，就是说V5版本直接支持基于文件自动生成路由了，无需再引入unplugin-vue-router。

这一变化标志着前端开发模式的一个重要转折点。过去，开发者需要手动定义路由配置，这种方式虽然灵活，但随着项目规模增大，维护成本也随之增加。现在，Vue Router 5.0内置了基于文件的路由系统，使得路由管理变得更加直观和高效。

传统路由配置与基于文件路由的对比

在传统的Vue Router使用方式中，我们需要手动创建路由：

import { createRouter, createWebHistory } from "vue-router";
import Home from "./views/Home.vue";
import About from "./views/About.vue";

const routes = [
  {
    path: "/",
    name: "home",
    component: Home,
  },
  {
    path: "/about",
    name: "about",
    component: About,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

而基于文件的路由系统允许我们通过目录结构自动生成路由，例如：

src/
├── pages/
│   ├── index.vue        # -> /
│   ├── about.vue        # -> /about
│   ├── user/
│   │   └── index.vue    # -> /user
│   └── user-[id].vue    # -> /user/:id

无需手动创建，直接导入即可：

import { routes } from "vue-router/auto-routes";

const router = createRouter({
  history: createWebHistory(),
  routes,
});

省去了手动定义路由的繁琐步骤。

基于文件路由的优势

  1. 减少样板代码：无需手动编写大量路由配置
  2. 约定优于配置：通过文件名和目录结构确定路由路径
  3. 提高开发效率：添加新页面只需创建对应文件
  4. 易于维护：路由结构一目了然，便于团队协作
  5. 类型化路由： 使用ts能够获得更好的提示，比如router.push(xxx)现在会有提示了

缺点

  1. 路由的meta等额外数据必须在.vue文件使用definePage或route标签声明，点此查看教程
  2. 增加了额外的学习成本

快速入门

安装

pnpm add vue-router@5

vite.config.ts

import VueRouter from "vue-router/vite";

export default defineConfig({
  plugins: [
    VueRouter({
      dts: "typed-router.d.ts",
    }),
    // ⚠️ Vue must be placed after VueRouter()
    Vue(),
  ],
});

tsconfig.json

// tsconfig.json
{
  "include": [ "typed-router.d.ts" ],
  "vueCompilerOptions": {
    "plugins": [
      "vue-router/volar/sfc-typed-router",
      "vue-router/volar/sfc-route-blocks"
    ]
  }
}

src/router/index.ts

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

export const router = createRouter({
  history: createWebHistory(),
  routes,
});

// This will update routes at runtime without reloading the page
if (import.meta.hot) {
  handleHotUpdate(router);
}

详细的路由生成规则

根据官方文档，基于文件的路由系统有以下具体规则：

索引路由：任何 index.vue 文件（必须全小写）将生成空路径，类似于 index.html 文件：

嵌套路由：当在同一层级同时存在同名文件夹和 .vue 文件时，会自动生成嵌套路由。例如：

src/pages/
├── users/
│   └── index.vue
└── users.vue

这将生成如下路由配置：

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

不带布局嵌套的路由：有时候你可能想在URL中添加斜杠形式的嵌套，但不想影响UI层次结构。可以使用点号(.)分隔符：

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

要添加 /users/create 路由而不将其嵌套在 users.vue 组件内，可以创建 src/pages/users.create.vue 文件，. 会被转换为 /：

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

路由组：有时候需要组织文件结构而不改变URL。路由组允许你逻辑性地组织路由，不影响实际URL：

src/pages/
├── (admin)/
│   ├── dashboard.vue
│   └── settings.vue
└── (user)/
    ├── profile.vue
    └── order.vue

生成的URL：

命名视图：可以通过在文件名后附加 @ + 名称来定义命名视图，如 src/pages/index@aux.vue 将生成：

{
  path: '/',
  component: {
    aux: () => import('src/pages/index@aux.vue')
  }
}

默认情况下，未命名的路由被视为 default，即使有其他命名视图也不需要将文件命名为 index@default.vue。

动态路由：使用方括号语法定义动态参数：

对开发工作流的影响

这一变化将显著改变Vue应用的开发流程：

迁移策略

对于现有项目，Vue Router 5.0提供了平滑的迁移路径：

配置选项和高级功能

Vue Router 5.0的基于文件路由系统提供了丰富的配置选项，可以根据项目需求进行定制：

自定义路由目录：默认情况下，系统会在 src/pages 目录中查找 .vue 文件，但可以通过配置更改此行为。

命名路由：所有生成的路由都会自动获得名称属性，避免意外将用户引导至父路由。默认情况下，名称使用文件路径生成，但可以通过自定义 getRouteName() 函数覆盖此行为。

类型安全：系统会自动生成类型声明文件（如 typed-router.d.ts），提供几乎无处不在的 TypeScript 验证。

配置示例：

// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import VueRouter from "unplugin-vue-router/vite";

export default defineConfig({
  plugins: [
    VueRouter({
      routesFolder: "src/pages", // 自定义路由目录
      extensions: [".vue"], // 指定路由文件扩展名
      dts: "typed-router.d.ts", // 生成类型声明文件
      importMode: (filename) => "async", // 自定义导入模式
    }),
    vue(),
  ],
});

实际应用建议

在实际项目中采用基于文件的路由时，建议遵循以下最佳实践：

  1. 清晰的目录结构：保持一致的目录结构，便于团队成员理解
  2. 有意义的文件名：使用描述性的文件名，使路由意图明确
  3. 合理使用路由组：利用路由组组织相关的页面，而不影响URL结构
  4. 渐进式采用：对于大型项目，可以逐步迁移部分路由到新的系统

总结

Vue Router 5.0引入的基于文件的路由系统代表了前端开发模式的重要演进。它将 Nuxt.js 等框架成功的路由理念整合到了 Vue 的核心生态中，使开发者能够以更简洁、更直观的方式管理应用路由。

这一变化不仅减少了样板代码，提高了开发效率，还促进了更一致的项目结构。随着更多开发者采用这一新模式，我们可以期待看到更高质量、更易维护的 Vue 应用程序出现，这将为整个前端社区带来积极的影响。

到此这篇关于vue文件自动生成路由的实现方法的文章就介绍到这了,更多相关vue文件自动生成路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文