Skip to content
Automatically resolve pages and layouts routing
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
generator
.eslintignore
.eslintrc.yml
.gitignore
.prettierignore
.prettierrc.yml
LICENSE
README.md
index.js
package-lock.json
package.json

README.md

vue-cli-plugin-auto-routing

vue-cli-plugin-auto-routing Dev Token

Vue CLI plugin that provides auto routing feature.

Overview

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

$ 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.

Note that directories and files started and ended with __ (two underscores, e.g. __foo__.vue) will be ignored.

For example, when you have the following page components:

pages/
├── __partial__.vue
├── 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')
      }
    ]
  }
]

If you want to make route param required, create a directory for the param and add index.vue in the directory. In the above example, if you replace users/_id.vue with users/_id/index.vue, :id param will be required.

<route-meta> custom block

If a page component has <route-meta> custom block, the content json will be used as route meta field.

For example, if index.vue has the following <route-meta> block:

<route-meta>
{
  "requiresAuth": true
}
</route-meta>

<template>
  <h1>Hello</h1>
</template>

The generated route config is like the following:

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

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.

For example, when you have layouts/foo.vue and 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:

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

Related Projects

License

MIT

You can’t perform that action at this time.