标签：src vue users plugin Pages vite pages 路由

vite-plugin-pages

使用

安装

首先先安装依赖。因为模版里自带了 vue-router ，所以不需要再安装。
cnpm add vite-plugin-pages vite-plugin-vue-layouts -D
在 vite.config.js 增加以下配置：

import Pages from 'vite-plugin-pages'
 
export default {
    plugins: [
        Pages({
            dirs: 'src/views',  // 需要生成路由的文件目录
            exclude: ['**/components/*.vue']  // 排除在外的目录，即不将所有 components 目录下的 .vue 文件生成路由
        })
    ]
}

目前只需要配置这 2 个参数就够了，其它还有更多参数可以去 vite-plugin-pages 项目页了解。

接着在页面中引入就可以使用了。

import { createRouter } from 'vue-router'
import routes from '~pages'
 
const router = createRouter({
    // ...
    routes
})

它能够根据pages文件夹下的文件组织结构自动生成一个路由数组，输入到Vue Router 实例中，文件组件结构决定你的路由层级，每次在pages目录下新增一个.vue文件后，即可自动为你创建路由，无需其他配置！
当然 pages 目录可以替换为你任何想要的目录名称，如views。除了.vue文件，也支持 markdown 等格式在文件。
目前对 react 的支持尚在实验阶段，当然你也可以访问它的主页来了解更多内容。
除此之外，对于常见的路由方式，它也提供了支持：

基础的路由映射

vue-plugin-pages（后称 VPP ）会自动将pages目录下的文件映射成相同名字的路由：

src/pages/users.vue -> /users
src/pages/users/profile.vue -> /users/profile
src/pages/settings.vue -> /settings

默认索引路由

以 index 命名的文件会自动当做路由的索引页：

src/pages/index.vue -> /
src/pages/users/index.vue -> /users

动态路由

使用方括号来表示动态路由，文件夹和文件都可以动态哦：

src/pages/users/[id].vue -> /users/:id (/users/one)
src/[user]/settings.vue -> /:user/settings (/one/settings)
动态参数需要通过 props 传入到目标页面，如 src/pages/users/[id].vue 路由 /users/abc 将需要传递如下参数：
{ "id": "abc" }

嵌套路由

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

当我们有如下的目录结构时：

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'
      }
    ]
  }
]

捕获所有路由

捕获所有路由使用包含省略号的方括号来表示：
src/pages/[...all].vue -> /* (/non-existent-page)
省略号后的文字将用于命名路由，以及用作传递路由参数的属性名称。

配置及实现

首先使用vite新创建一个vue项目：

# yarn
yarn create @vitejs/app my-vue-app --template vue-ts

cd my-vue-app

yarn add -D vite-plugin-pages

yarn add vue-router@next

然后将以下代码添加到你的vite.config.js中：

import Vue from '@vitejs/plugin-vue';
import Pages from 'vite-plugin-pages';

export default {
  plugins: [
    Vue(),
    Pages()
  ]
};

修改 main.ts:

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import routes from 'virtual:generated-pages';
import App from './App.vue';

console.log(routes);

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

const app = createApp(App);

app.use(router);

app.mount('#app');

修改 App.vue：

<template>
  <router-view />
</template>

到此为止已经完成了所有的配置及前置工作，接下来我们在 src 目录下创建 pages 目录，然后按照你的喜好添加文件吧，如：

├── [...all].vue # 捕获所有路由，常用于404
├── about
│   └── index.vue
├── about.vue # 通过/about来访问该页面
├── blog  # 通过/blog来访问
│   ├── [id].vue # 动态路由
│   ├── index.vue
│   └── today
├── components.vue
└── index.vue # 当访问本地IP和端口号时的默认页面

如果想要添加其他的文件目录，可以通过修改vite.config.js中的Pages - pagesDir属性进行配置。

标签：src,vue,users,plugin,Pages,vite,pages,路由
From： https://www.cnblogs.com/guozhiqiang/p/16892086.html

vue-plugin-Pages自动配置路由