Vue-auto-routes NPM

npm.io

🚦Future-Oriented vue routing system

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

Features

Dynamic routing system $id.vue
Support props mode {id}.vue
Auto add new route to routes map, free you hands!

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: 'src/views'
    })
  ]
}

Or in your {poi,vue}.config.js:

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

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

Then in your router.js:

import { routes } from 'vue-auto-routes'
// v3
export default new VueRouter({ routes })
// v4
export const router = createRouter({
  routes
})

Routing 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    // !!deprecated!!
// {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, e.g. src/views.

Deprecated
Type: boolean
Default: false

Now we recognize v4 automatically. Do not need this anymore.

Vue router next See migration.

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
} = require('vue-auto-routes/lib/collect-fs-routes')

const routes = await collectRoutes(options)
const routesString = renderRoutes(routes)

Options for options