页面路由自动加#_自动解决页面和布局路由

页面路由自动加#

vue-cli-plugin-自动路由 (vue-cli-plugin-auto-routing)

Vue CLI plugin that provides auto routing feature.

提供自动路由功能的Vue CLI插件。

总览 (Overview)

Ensure you are in a project generated by Vue CLI v3. You install this plugin by running the following command:

确保您处于由Vue CLI v3生成的项目中。 您可以通过运行以下命令来安装此插件：

$ vue add auto-routing

After adding the plugin, the file structure will be the below.

添加插件后，文件结构如下。

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

页数 (Pages)

.vue files under the pages/ directory will be automatically resolved to generate routing. Vue Router routes options will be configured with the file structure under the pages/. The generated routing is same with Nuxt's routing.

pages/目录下的.vue文件将被自动解析以生成路由。 Vue路由器的routes选项将使用pages/下的文件结构进行配置。 生成的路由与Nuxt的routing相同。

For example, when you have the following page components:

例如，当您具有以下页面组件时：

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

It is resolved to the below routes. Note that _ prefixed components generate dynamic routing.

解决了以下路线。 请注意， _前缀的组件会生成动态路由。

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)

Components under the layouts/ directory will be used as shared layout component in the application. You can choose a layout by specifying layout component option in a page component. The default value of layout is 'default'. That means when you omit layout options, layouts/default.vue will be choosed as the layout component. This is the same concept with Nuxt's layouts.

layouts/目录下的组件将在应用程序中用作共享布局组件。 您可以通过在页面组件中指定layout组件选项来选择布局。 layout的默认值为'default' 。 这意味着当您忽略layout选项时， layouts/default.vue将被选择为布局组件。 这与Nuxt的布局相同。

For example, when you have layouts/foo.vue and pages/index.vue:

例如，当您有layouts/foo.vue和pages/index.vue ：

<!-- 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 {
  // You can specify layout component name here (default value is 'default')
  layout: 'foo'
}
</script>

The following html will be rendered:

将呈现以下html：

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

翻译自: https://vuejsexamples.com/automatically-resolve-pages-and-layouts-routing/

页面路由自动加#