https://github.com/foolishchow/vue-router-loader-yaml

load vue-router config via yaml
https://github.com/foolishchow/vue-router-loader-yaml

lazyload loader vue-router-loader webpack yaml

Last synced: about 1 month ago
JSON representation

load vue-router config via yaml

• Host: GitHub
• URL: https://github.com/foolishchow/vue-router-loader-yaml
• Owner: foolishchow
• License: bsd-3-clause
• Created: 2017-04-14T06:42:07.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-06-05T02:03:24.000Z (over 7 years ago)
• Last Synced: 2024-09-30T23:04:09.847Z (about 1 month ago)
• Topics: lazyload, loader, vue-router-loader, webpack, yaml
• Language: JavaScript
• Size: 5.86 KB
• Stars: 2
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-router-loader-yaml

load vue-router config via yaml

> `0.0.3` meta can config in yaml 

> useage   

```shell

 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'

    },

    // ...

],

//...

```

> common useage   

 your yaml file:

```yaml

index:

    path: /

    component: ./platform/system/index/index.vue

    meta:

        nav: none

```

output:   

```js

import index from './platform/system/index/index.vue';

export default [

{

    path: '/',

    component: index.

    meta:{nav:'none'}

}];

```

> lazyload    

```yaml

userList:

    path: /users

    component: ./platform/system/users/user.vue

    lazy:  system

```

output:   

```js

const userList = r=>require.ensure([],()=>r(require('./platform/system/users/user.vue')),'system');

export default [

{

    path: '/users',

    component: userList

}];

```

> Nested router   

```yaml

index:

    path: /

    component: ./platform/system/index/index.vue

    children:

        userList:

            path: /users

            component: ./platform/system/users/index.vue

            lazy:  system

        testList:

            path: /test

            component: ./platform/system/test/index.vue

            lazy:  system

```

output:   

```js

const userList = r=>require.ensure([],()=>r(require('./platform/system/users/index.vue')),'system');

const testList = r=>require.ensure([],()=>r(require('./platform/system/test/index.vue')),'system');

import index from './platform/system/index/index.vue';

export default [

{

    path: '/',

    component: index,

    children:[

{

    path: '/users',

    component: userList

},

{

    path: '/test',

    component: testList

}]}];

```

> lazyload extends and overwrited      

```yaml

index:

    path: /

    component: ./platform/system/index/index.vue

    lazy: base

    children:

        users:

            path: /users

            component: ./platform/system/users/index.vue

            lazy:  False

        testList:

            path: /test

            component: ./platform/system/test/index.vue

            lazy:  system

        mainList:

            path: /main

            component: ./platform/system/main/index.vue

````

- 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

}]}];

```