【VUE3】使用 Vite 插件 Vite-plugin-pages 和 Vite-plugin-vue-layouts 构建管理后台嵌套路由

介绍

管理后台通常需要处理大量的嵌套路由，为了简化路由配置的过程，我们可以借助 Vite 的两个插件：Vite-plugin-pages 和 Vite-plugin-vue-layouts。Vite-plugin-pages 可以自动化生成路由配置，而 Vite-plugin-vue-layouts 则可以帮助我们创建和管理布局组件。

在本文中，我们将使用这两个插件，演示如何构建管理后台的嵌套路由。

步骤

步骤一：安装插件

首先，我们需要在我们的项目中安装 Vite-plugin-pages 和 Vite-plugin-vue-layouts。可以使用以下命令来安装这两个插件：

npm install -D vite-plugin-pages vite-plugin-vue-layouts

步骤二：配置插件

在项目的 Vite 配置文件 vite.config.js 中，我们需要进行插件的配置。配置如下：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Pages from 'vite-plugin-pages';
import Layouts from 'vite-plugin-vue-layouts';

export default defineConfig({
  plugins: [
    vue(),
    Pages(),
    Layouts()
  ]
});

通过上述配置，我们已经成功引入了这两个插件。

步骤三：创建布局组件

接下来，我们需要创建管理后台的布局组件。布局组件可以定义管理后台的整体结构，例如导航栏、侧边栏、页脚等。

在 layouts 目录下，创建一个名为 AdminLayout.vue 的文件，并定义管理后台的布局结构。示例代码如下：

<template>
  <div>
    <div class="navbar">导航栏</div>
    <div class="sidebar">侧边栏</div>
    <router-view />
    <div class="footer">页脚</div>
  </div>
</template>

<style>
/* 样式定义 */
</style>

步骤四：创建页面组件

在 src/pages 目录下，我们可以创建管理后台的页面组件。每个页面组件代表管理后台的一个功能模块。

例如，我们可以创建一个名为 Dashboard.vue 的文件，作为管理后台的仪表盘页面。示例代码如下：

<template>
  <div>
    <h1>仪表盘页面</h1>
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  // 组件逻辑
}
</script>

<style>
/* 样式定义 */
</style>

步骤五：编写路由配置

在 src/router/index.js 文件中，我们需要编写路由配置。使用 Vite-plugin-pages，我们可以自动生成路由配置，只需简单地导入页面组件即可。

import { createRouter, createWebHistory } from 'vue-router';
import { setupLayouts } from 'layouts-generated';

const routes = setupLayouts([
  {
    path: '/',
    component: () => import('../layouts/AdminLayout.vue'), // 使用我们之前创建的布局组件
    children: [
      {
        path: '',
        component: () => import('../pages/Dashboard.vue') // 使用我们之前创建的页面组件
      },
      // 其他嵌套路由配置
    ]
  }
]);

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

export default router;

步骤六：运行项目

最后，我们可以运行我们的项目，并访问管理后台的页面。使用以下命令启动项目：

npm run dev

打开浏览器，访问 http://localhost:3000，就可以看到管理后台的布局和仪表盘页面了。

结论

通过使用 Vite-plugin-pages 和 Vite-plugin-vue-layouts，我们可以快速、高效地构建管理后台的嵌套路由。这两个插件大大简化了路由配置的过程，同时提高了开发效率。

希望本文对你有所帮助，祝你在构建管理后台时取得成功！