vue-router-invoke-next-webpack-plugin
Automatic generate routes of vue-router
based on the directory, both supported vue2.x or vue3.x
Usage
Download
yarn add vue-router-invoke-next-webpack-plugin@alpha -D
Options
Options | Type | Required | Default | Description |
---|---|---|---|---|
root | String | true | '' | the directory which should be watched and generated |
alias | String | false | 'Invoke' | the root directory's alias |
version | String or Number | false | 3 | vue version 2 or 3 |
language | String | false | 'typescript' | typescript or javascript |
mode | String | false | 'history' | hash or history |
dist | String | false | {root}/.invoke |
the output directory of generatic route |
Using In Webpack
webpack.config.js
const Invoke = ; moduleexports = // omit some options mode: ... entry: ... // you [must] set alias path the same as Invoke's Root Option resolve: alias: 'Invoke': ROOT // use plugins plugins: // should be the same as resolve.alias.Invoke root: ROOT
Also you need make sure the value of process.env.NODE_ENV
is equal to development
or production
in diffrent enviroment
Using In VueCli
vue.config.js
const Invoke = ;const path = ; moduleexports = // omit other options... { // you [must] set alias path the same as Invoke's Root Option configresolvealiasInvoke = path; configplugins; }; // or another way.. moduleexports = // omit other options... configureWebpack: resolve: alias: // you [must] set alias path the same as Invoke's Root Option Invoke: path plugins: // should be the same as resolve.alias.Invoke root: path ;
Using With Typescript
you may need add baseUrl
and paths
for friendly check
What Is The Root Option
The ROOT
option which means the aim directory to be watched, for an example
src├── app.vue├── main.js└── views ├── index.vue ├── shop │ └── index.vue └── user └── index.vue
path.resolve(process.cwd(), 'src/views')
should be the root
path which be watched to generate routes for vue-router
How to Generate Routes
We split routes into Single
Dynamic
and Nested
route
The below examples depends on the same options
webpack.config.js
const Invoke = ;const path = ; moduleexports = // omit some options mode: ... entry: ... // you [must] set alias path the same as Invoke's root option resolve: alias: 'Invoke': path plugins: // should be the same as resolve.alias.Invoke root: path
Single
A directory which has a file called index.vue
(no sensitive to capital and small letter) can be translated to single route
src├── app.vue├── main.js└── views ├── index.vue ├── shop │ ├── index.vue │ └── star │ └── index.vue └── user └── index.vue
The routes will be auto generated to the file src/views/.invoke/router.js
You can change the default output directory which is ${root}/.invoke
by using the dist
option
src/views/.invoke/router.js
; const routerHistory = ;const router = ;
Dynamic
A directory which start with _
and has a file which called index.vue
can be translated to dynamic route
src├── app.vue├── main.js└── views ├── _user │ └── index.vue ├── index.vue └── shop ├── _star │ └── index.vue └── index.vue
src/views/.invoke/router.js
; const routerHistory = ;const router = ;
Nested
A directory has the same name as its first file will be translated to nested route
src├── app.vue├── main.js└── views ├── index.vue └── nest ├── child │ └── index.vue ├── inner │ └── index.vue └── nest.vue
src/views/.invoke/router.js
; const routerHistory = ;const router = ;
Route Options
route options just like meta
redirect
you can set by using route.yml
src├── app.vue├── main.js└── views ├── index.vue └── single ├── index.vue └── route.yml
route.yml
meta: number: 123 string: 'string' boolean: true redirect: '/test'
src/views/.invoke/router.js
; const routerHistory = ;const router = ;
Router Options
options of vue-router
you can set it by Invoke
Options
webpack.config.js
const Invoke = ;const path = ; moduleexports = // omit some options mode: ... entry: ... // you [must] set alias path the same as Invoke's root option resolve: alias: 'Invoke': path plugins: // should be the same as resolve.alias.Invoke root: path { if savedPosition return savedPosition; else return left: 0 top: 0 ; }
src├── app.vue├── main.js└── views └── index.vue
src/views/.invoke/router.js
; const routerHistory = ;const router = ;
Change Default Alias
If you want to change default alias Invoke
you can use the option called alias
webpack.config.js
const Invoke = ;const path = ; moduleexports = // omit some options mode: ... entry: ... resolve: alias: '@': path plugins: // should be the same as resolve.alias.@ root: path // change default alias alias: '@' { if savedPosition return savedPosition; else return left: 0 top: 0 ; }
src├── app.vue├── main.js└── views └── index.vue
src/views/.invoke/router.js
; const routerHistory = ;const router = ;