🚦Future-Oriented vue routing system
Please consider starring the project to show your ❤ and support.
$id.vue
{id}.vue
For details see routing convertion
yarn add vue-auto-routes
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
})
// 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 -> *
new VueAutoRoutes(options)
Since v1.1.11
options for @ream/collect-fs-routes v1.0.2, but differences with these following
string
true
Routes directory, e.g. src/views
.
boolean
false
Now we recognize v4 automatically. Do not need this anymore.
Vue router next See migration.
string
RegExp
'vue'
/\.vue$/
It used to match page components.
We use ,
to split match file extension when is a string.
boolean
true
in webpack-dev-server
and webpack-dev-middleware
, false
otherwiseWatching pages directory to auto update routes.
boolean
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
.
@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
git checkout -b my-new-feature
git commit -am 'Add some feature'
git push origin my-new-feature
vue-auto-routes © evillt, Released under the MIT License.
Authored and maintained by EVILLT with help from contributors (list).