Skip to content
Auto generate vue routes
Branch: master
Clone or download

README.md

vue-auto-routes

Auto generate vue routes

Please consider starring the project to show your ❤️ and support.

NPM version NPM download CircleCI License donate

Install

yarn add vue-auto-routes

Usage

We assume your directory looks like this:

src
├── views
│   ├── index.vue
│   └── about.vue
├── webpack.config.js   # basic webpack project
└── vue.config.js       # create by vue/cli

In your webpack.config.js:

const VueAutoRoutes = require('vue-auto-routes/plugin')

module.exports = {
  plugins: [
    new VueAutoRoutes({
      dir: require('path').resolve(__dirname, 'src/views')
    })
  ]
}

In your vue.config.js:

const VueAutoRoutes = require('vue-auto-routes/plugin')

module.exports = {
  chainWebpack(config) {
    config.plugin('auto-routes').use(VueAutoRoutes, [
      {
        dir: require('path').resolve(__dirname, 'src/views')
      }
    ])
  }
}

And in your router.js:

import { routes } from 'vue-auto-routes'

export default new VueRouter({ routes })

Files Convertion

// index.vue -> /
// about.vue -> /about
// user.vue -> /user
// user/index.vue -> /user, child ''
// user/friends.vue -> /user, child 'friends'
// catalog/index.vue -> /catalog
// catalog/specials.vue -> /catalog/specials
// _path.vue -> /:path
// {path}.vue -> /:path  props: true
// 404.vue -> *

API

new VueAutoRoutes(options)

options

Since v1.1.11 options for @ream/collect-fs-routes v1.0.2, but differences with these following

dir

  • Type: string
  • Required: true

Routes directory, it should be an absolute path.

componentPrefix

match

  • Type: string RegExp
  • Default: 'vue' /\.vue$/

It used to match page components.

We use , to split match file extension when is a string.

watchMode

  • Type: boolean
  • Default: true in webpack-dev-server and webpack-dev-middleware, false otherwise

Watching pages directory to auto update routes.

default404

  • Type: boolean
  • Default: true

Use internal 404 page for mismatch route. You can create a 404.{#match} in your dir to instead of it or set it false.

Other

@ream/collect-fs-routes Offical usage like.

const {
  collectRoutes,
  renderRoutes,
  renderRoutesMap
} = require('vue-auto-routes/lib/collect-fs-routes')

const routes = await collectRoutes(options)
const routesString = renderRoutes(routes)
const routesMap = renderRoutesMap(routes) // Get a fullPath list of each route

Options for options

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

Author

vue-auto-routes © evillt, Released under the MIT License.

Authored and maintained by EVILLT with help from contributors (list).

evila.me · GitHub @evillt · Twitter @evillt

You can’t perform that action at this time.