自动生成路由

手动

目录结构和 Routes.ts 的配置路径存在一定的耦合性，如果目录结构发生变化，需要手动修改 Routes.ts 中的配置。

可以采用 umijs 的方法，使用约定大于配置的方式，实现自动生成路由。

vite 使用 import.meta.glob
webpack 使用 require.context

由于目录信息不充足，可以采用小程序的做法，
在每一个页面下添加一个 meta.ts 文件，里面只包含一个对象，里面包含路由信息

1
2
3
4
5
export default {
  title: "name",
  path: "/name",
  menuOrder: 1, // 菜单排序
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 只存在于编译时态
const pages = import.meta.glob("./**/meta.ts", {
  eager: true,
  import: "default",
});

const components = import.meta.glob('../views/**/index.vue',{
  eager: true,
  import: 'default',
})

const routes = Object.entries(pages).map([path,meta] =>{
  path = path.replace('../views','').replace('meta.ts','') || '/';
  const name =path.split('/').filter(Boolean).join('-') || 'index';
  const compPath =path.replace('meta.ts','index.vue')

  return{
    path,
    name,
    component:()=>import(compPath),
    meta,
  }
});

插件

在 vite 中可以使用unplugin-vue-router（推荐）或者vite-plugin-pages插件在前端项目中自动生成前端路由，通过文件系统结构自动映射为路由配置，减少手动维护路由的工作量。

本文介绍 unplugin-vue-router 插件,vite-plugin-pages 插件可以查看博主页面仔 D的博客文章。

安装必要依赖包

  1. 安装插件
1
pnpm i -D unplugin-vue-router
  1. 配置 vite.config.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { defineConfig } from "vite";
import Vue from "@vitejs/plugin-vue";
import VueRouter from "unplugin-vue-router/vite";

export default defineConfig({
  plugins: [
    VueRouter({
      /* options */
      routesFolder: [
        {
          src: "src/pages",
          path: "",
          // override globals
          exclude: (excluded) => excluded,
          filePatterns: (filePatterns) => filePatterns,
          extensions: (extensions) => extensions,
        },
      ],
    }),
    // ⚠️ Vue must be placed after VueRouter()
    Vue(),
  ],
});

然后如果有 env.d.ts 文件，请向其中添加 unplugin-vue-router/client 类型：

1
2
3
// env.d.ts
/// <reference types="vite/client" />
/// <reference types="unplugin-vue-router/client" />

如果没有 env.d.ts 文件，可以创建一个并将 unplugin-vue-router 类型添加到其中 ，或者可以添加到 tsconfig.json 中的 types 属性中：

1
2
3
4
5
6
{
  "compilerOptions": {
    // ...
    "types": ["unplugin-vue-router/client"]
  }
}

基本用法

在router/router.ts 文件中添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
import { createRouter, createWebHistory } from "vue-router";
import { routes } from "vue-router/auto-routes";

createRouter({
  history: createWebHistory(),
  // 动态路由
  routes,
});

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

样式文件路径：

1
2
3
4
5
6
src/pages/
├── index.vue
├── about.vue
└── users/
    ├── index.vue
    └── [id].vue

命名视图

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

1
2
3
4
5
6
{
  path: '/',
  component: {
    aux: () => import('src/pages/index@aux.vue')
  }
}

路由组

有时，以一种不改变路由 URL 的方式组织文件结构会很有帮助。路由组可以让你以合理的方式组织路由，而不会影响实际的 URL。例如，如果你有多个共享相同布局的路由，你可以使用路由组将它们分组。请考虑以下文件结构：

1
2
3
4
5
6
7
src/pages/
├── (admin)/
│   ├── dashboard.vue
│   └── settings.vue
└── (user)/
    ├── profile.vue
    └── order.vue

动态路由

可以通过将参数名称括在括号中来添加路由参数，例如src/pages/users/[id].vue将创建具有以下路径的路由：/users/:id。

可以通过用一对额外的括号将参数名称括起来来创建可选参数 ，例如src/pages/users/[[id]].vue将创建具有以下路径的路由：/users/:id?。

全部捕获 / 404 未找到路线

要创建捕获所有路由，请在参数名称前添加三个点 ( ... )，例如 src/pages/[...path].vue将创建一个包含以下路径的路由：/:path(.\*)。这将匹配任何路由。

更多使用方法 👉官方文档