Vue CLI 插件自动路由教程

Vue CLI 插件自动路由教程

1. 项目介绍

vue-cli-plugin-auto-routing 是一个 Vue CLI 插件，旨在自动解析页面和布局的路由。它通过自动生成路由配置，简化了 Vue 项目中路由的设置过程。该插件基于 vue-auto-routing 和 vue-route-generator，能够根据项目目录结构自动生成路由配置，极大地提高了开发效率。

2. 项目快速启动

安装

确保你在一个由 Vue CLI >= v3 生成的项目中。首先，安装 Vue Router 插件（如果尚未安装）：

vue add router

然后，安装 vue-cli-plugin-auto-routing：

vue add auto-routing

项目结构

安装插件后，项目结构将如下所示：

src/
├── pages/
├── layouts/
└── router/

自动生成路由

在 pages/ 目录下的 .vue 文件将自动解析为路由配置。例如，如果你有以下页面组件：

pages/
├── __partial__.vue
├── index.vue
├── users.vue
└── users/
    └── _id.vue

生成的路由配置如下：

export default [
  {
    name: 'index',
    path: '/',
    component: () => import('@/pages/index.vue')
  },
  {
    name: 'users',
    path: '/users',
    component: () => import('@/pages/users.vue'),
    children: [
      {
        name: 'users-id',
        path: ':id',
        component: () => import('@/pages/users/_id.vue')
      }
    ]
  }
]

使用布局组件

在 layouts/ 目录下的组件将作为共享布局组件。你可以在页面组件中通过指定 layout 选项来选择布局组件。例如：

<!-- layouts/foo.vue -->
<template>
  <div>
    <h1>Foo Layout</h1>
    <router-view />
  </div>
</template>

<!-- pages/index.vue -->
<template>
  <p>index.vue</p>
</template>
<script>
export default {
  layout: 'foo' // 指定布局组件名称
}
</script>

渲染后的 HTML 如下：

<div>
  <h1>Foo Layout</h1>
  <p>index.vue</p>
</div>

3. 应用案例和最佳实践

动态路由生成

通过在页面组件中使用 <route> 自定义块，可以动态生成路由配置。例如：

<!-- pages/index.vue -->
<route>
{
  "name": "home",
  "meta": {
    "requiresAuth": true
  }
}
</route>
<template>
  <h1>Hello</h1>
</template>

生成的路由配置如下：

module.exports = [
  {
    name: 'home',
    path: '/',
    component: () => import('@/pages/index.vue'),
    meta: {
      requiresAuth: true
    }
  }
]

避免代码冲突

如果自动生成的代码块名称与现有代码冲突，可以通过设置 chunkNamePrefix 选项来避免冲突：

// vue.config.js
module.exports = {
  pluginOptions: {
    autoRouting: {
      chunkNamePrefix: 'page-'
    }
  }
}

4. 典型生态项目

vue-router-layout

vue-router-layout 是一个轻量级的布局解析器，用于 Vue Router。它与 vue-cli-plugin-auto-routing 配合使用，可以更好地管理布局组件。

vue-auto-routing

vue-auto-routing 是 vue-cli-plugin-auto-routing 的核心依赖，用于自动生成 Vue Router 的路由配置。

vue-route-generator

vue-route-generator 是一个低级别的工具，用于生成路由配置。它是 vue-auto-routing 的基础，提供了更灵活的路由生成功能。

通过这些生态项目的配合使用，可以构建出更加高效和灵活的 Vue 应用。