项目作者: foolishchow

项目描述 :
load vue-router config via yaml
高级语言: JavaScript
项目地址: git://github.com/foolishchow/vue-router-loader-yaml.git
创建时间: 2017-04-14T06:42:07Z
项目社区:https://github.com/foolishchow/vue-router-loader-yaml

开源协议:BSD 3-Clause "New" or "Revised" License

下载


vue-router-loader-yaml

load vue-router config via yaml

0.0.3 meta can config in yaml

useage

  1. npm install vue-router-loader-yaml --save-dev

in your webpack.config.js
```js
rules: [
{
test: /router.yaml$/,
loader: ‘babel-loader!vue-router-loader-yaml’
},
// …
],
//…

  1. > common useage
  2. your yaml file:
  3. ```yaml
  4. index:
  5. path: /
  6. component: ./platform/system/index/index.vue
  7. meta:
  8. nav: none

output:

  1. import index from './platform/system/index/index.vue';
  2. export default [
  3. {
  4. path: '/',
  5. component: index.
  6. meta:{nav:'none'}
  7. }];

lazyload

  1. userList:
  2. path: /users
  3. component: ./platform/system/users/user.vue
  4. lazy: system

output:

  1. const userList = r=>require.ensure([],()=>r(require('./platform/system/users/user.vue')),'system');
  2. export default [
  3. {
  4. path: '/users',
  5. component: userList
  6. }];

Nested router

  1. index:
  2. path: /
  3. component: ./platform/system/index/index.vue
  4. children:
  5. userList:
  6. path: /users
  7. component: ./platform/system/users/index.vue
  8. lazy: system
  9. testList:
  10. path: /test
  11. component: ./platform/system/test/index.vue
  12. lazy: system

output:

  1. const userList = r=>require.ensure([],()=>r(require('./platform/system/users/index.vue')),'system');
  2. const testList = r=>require.ensure([],()=>r(require('./platform/system/test/index.vue')),'system');
  3. import index from './platform/system/index/index.vue';
  4. export default [
  5. {
  6. path: '/',
  7. component: index,
  8. children:[
  9. {
  10. path: '/users',
  11. component: userList
  12. },
  13. {
  14. path: '/test',
  15. component: testList
  16. }]}];

lazyload extends and overwrited

  1. index:
  2. path: /
  3. component: ./platform/system/index/index.vue
  4. lazy: base
  5. children:
  6. users:
  7. path: /users
  8. component: ./platform/system/users/index.vue
  9. lazy: False
  10. testList:
  11. path: /test
  12. component: ./platform/system/test/index.vue
  13. lazy: system
  14. mainList:
  15. path: /main
  16. component: ./platform/system/main/index.vue
  17. `
  • outout:
    ```js
    import users from ‘./platform/system/users/index.vue’;
    const testList = r=>require.ensure([],()=>r(require(‘./platform/system/test/index.vue’)),’system’);
    const mainList = r=>require.ensure([],()=>r(require(‘./platform/system/main/index.vue’)),’base’);
    const index = r=>require.ensure([],()=>r(require(‘./platform/system/index/index.vue’)),’base’);

export default [
{
path: ‘/‘,
component: index,
children:[
{
path: ‘/users’,
component: users
},
{
path: ‘/test’,
component: testList
},
{
path: ‘/main’,
component: mainList
}]}];
```