vite-plugin-pages 自动生成路由

使用描述

在使用 vue、react 等项目时通常要为页面配置路由，这项工作其实不免有点重复，并且在使用 next.js或者nuxt.js 时，都会不由为其中的文件路由系统所赞叹，所以就在想，那再普通的项目能不能也用这个写法，所以就找到了这个 vite-plugin-pages 使用起来也并不复杂，在这里记录一下写法

安装插件

使用包管理安装

npm i vue-router

npm i vite-plugin-pages -D

https://www.npmjs.com/package/vite-plugin-pages

配置步骤

vite.config.js

在项目根目录下的 vite.config.js 中配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pages from 'vite-plugin-pages'

export default defineConfig({
  plugins: [
    vue(),
    pages({
      dirs: 'src/views', // 指定需要生成路由页面目录
      exclude: ['**/components/*.vue'] // 排除某些文件，排除components下的vue文件
    })
  ]
})

1. dirs：用于指定包含页面组件的目录。插件会根据这些目录中的文件结构自动生成路由 string | string[]

2. exclude：配置项用于排除某些文件或目录，防止它们被插件处理并生成路由 string | string[]

3. extendRoute：是一个函数，允许你在插件生成路由之后，对每个路由进行自定义扩展 void

export default {
  plugins: [
    Pages({
      extendRoute(route, parent) {
        // 添加 meta 信息
        route.meta = route.meta || {}
        route.meta.layout = 'default'
          
        if (route.path === '/') {
            // 添加一个默认重定向
            return {
                ...route,
                redirct: 'about'
            }
        }
        // 返回修改后的路由对象
        return route
      },
    }),
  ],
}

router/index.js

在项目中的 router 文件中的 index.js

import { createRouter, createWebHistory } from 'vue-router'
import routes from 'virtual:generated-pages'
const router = createRouter({
  history: createWebHistory(),
  routes
})
export default router

路由生成规则

基本路由

Pages 会自动将文件从 views(上面设定的 dirs) 目录映射到同名

• src/views/user.vue --> /user

• src/views/users/profile.vue --> /users/profile

索引路由

具有 index 名称的文件被视为路由的索引页

• src/views/index.vue --> /

• src/views/users/index.vue --> /users

动态路由

动态路由使用 方括号 表示。目录和页面都可以 动态

• src/views/users/[id].vue --> /users/:id

• src/views/[user]/settings.vue --> /:user/settings

任何动态参数都将作为 props 传递给页面

// /detail/111
import { defineProps } from 'vue'
const props = defineProps({
  id: String
})

console.log(props.id) // 111

嵌套路由

我们可以使用 Vue Routers 的子路由来创建嵌套布局。父级 组件可以通过为其指定与目录相同的名称来定义 包含您的子路由

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

将会导致以下路由配置

[
  {
    "path": "/users",
    "component": "/src/pages/users.vue",
    "children": [
      {
        "path": "",
        "component": "/src/pages/users/index.vue",
        "name": "users"
      },
      {
        "path": ":id",
        "component": "/src/pages/users/[id].vue",
        "name": "users-id"
      }
    ]
  }
]

Catch-all 路由

Catch-all 路由用包含省略号的方括号表示

• src/views/[...all].vue

省略号后的文本将用于命名路由，并用作名称 的 prop 中传递路由参数。

一般用这个来配置 404 页面

文刊借鉴

https://github.com/hannoeru/vite-plugin-pages