vue3+vite中自动配置路由的神器：vite-plugin-pages

最新推荐文章于 2025-03-16 10:33:25 发布

浩星

最新推荐文章于 2025-03-16 10:33:25 发布

阅读量7.8k

点赞数 6

分类专栏： vue3.0 文章标签：前端 vue.js vue3 vite

本文链接：https://blog.csdn.net/qq_41619796/article/details/131852232

版权

vue3.0 专栏收录该内容

63 篇文章

订阅专栏

文章介绍了如何在Vue3和Vite的项目中利用vite-plugin-pages和vite-plugin-vue-layouts插件自动化配置本地路由，包括一级路由、嵌套路由、动态路由以及如何排除特定组件。同时，展示了如何设置布局页面和处理不需要布局的页面，以及在后台管理系统中实现侧边栏和主要内容的路由配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：

在写vue3+vite组合的项目中，很多时候我们都需要配置本地路由，实际vite有个神器来提高效率，把配置本地路由的工作代替我们处理掉。

具体使用：

1、安装 npm/cnpm/pnpm/yarn 都可以，装上下面两个插件

vite-plugin-pages vite-plugin-vue-layouts

2、vite.config.js中配置

import Pages from 'vite-plugin-pages';
import Layouts from 'vite-plugin-vue-layouts';

const PROJECT_ROOT = '../..'; //根据个人项目实际需要
const config = {
    plugins: [
        Pages({
          // 需要生成路由的文件目录，默认就是识别src下面的pages文件
          pagesDir: join(PACKAGE_ROOT, 'src') + '/pages',
          //dirs: "src/pages", 

          // 排除在外的目录，即不将所有 components 目录下的 .vue 文件生成路由
          exclude: ["**/components/*.vue"], 
        }),
        Layouts({
            layoutsDirs: join(PACKAGE_ROOT, 'src') + '/layouts',
         }),


    ]
}

3、路由配置

import { createRouter, createWebHashHistory } from 'vue-router';
import { setupLayouts } from 'virtual:generated-layouts';//将route里面的路由变成嵌套路由
import generatedRoutes from 'virtual:generated-pages';


const routes = setupLayouts(generatedRoutes);
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});
const app = createApp(App);
app.use(router);

virtual:generated-layouts 这个插件只做一件事，就是把通过 vite-plugin-pages 生成的一级路由处理成嵌套路由，大概就是这样：

项目中有的路由是需要用到布局页面的，有的则不需要，

1、那我们可以将不需要的页面设置为 layout: false ：

<route>
    {
        meta: {
            layout: false
        }
    }
</route>

2、在路由配置中间增加

...
import generatedRoutes from 'virtual:generated-pages';

//加这里的代码
let routes = []
generatedRoutes.forEach(v => {
    routes.push(v?.meta?.layout != false ? setupLayouts([v])[0] : v)
})


//注释这行代码
const routes = setupLayouts(generatedRoutes);
...

4、后台管理系统的侧边栏，上边栏加右边主要内容路由配置

1）新建layouts

2）DesktopLayout.vue

<template>
  <div class="flex-box">
    <SidebarMenu />
    <div class="right-box">
      <div class="right-box-header">
        <TopbarMenu />
      </div>
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component"></component>
        </keep-alive>
      </router-view>
    </div>
  </div>
</template>v

3）单个页面的路由配置

1、增加路由配置

<route lang="yaml">
    meta:
      layout: DesktopLayout
    </route>

2、添加页面内容

<template> 
    <router-view v-slot="{ Component }">
        <keep-alive>
            ...页面主体内容
         </keep-alive>
  </router-view>
</template>

5、路由具体使用

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" }

这种的就是动态路由的页面