vue-cli-plugin-macula-auto-routing v0.3.3
vue-cli-plugin-macula-auto-routing
Vue CLI plugin that provides auto routing feature for multi pages(forked from ktsn/vue-cli-plugin-auto-routing).
Overview
Ensure you are in a project generated by Vue CLI v3. You install this plugin by running the following command:
$ vue add macula-auto-routing
After adding the plugin, the file structure will be the below.
src/
├── modules/
├─────index(every multipage module)
├─────── views/
├────────── xxx.vue
├─────── layouts/
├─────── router/
├────────── index.js
└────────── routes.js(auto generate)
Pages
.vue
files under the views/
directory will be automatically resolved to generate routing. Vue Router routes
options will be configured with the file structure under the views/
. 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:
views/
├── __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: 'xxx-index',
path: '/',
component: () => import('src/modules/xxx/views/index.vue')
},
{
name: 'xxx-users',
path: '/users',
component: () => import('src/modules/xxx/views/users.vue'),
children: [
{
name: 'xxx-users-id',
path: ':id?',
component: () => import('src/modules/xxx/views/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('src/modules/xxx/views/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 views/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
- vue-macula-auto-routing: Generate Vue Router routing for multipages automatically.
- vue-router-layout: Lightweight layout resolver for Vue Router.
- vue-macula-route-generator: Low-level utility generating routing (used by vue-macula-auto-routing under the hood).
License
MIT