Vue-routes-design NPM

vue-routes-design

一、Introduction

该插件是为了在写vue框架的路由配置时能更加简洁方便。使用该插件前后的代码对比，如下（此处我们默认路由组件都放在views目录下，先不要介意路径加载问题）：

使用该插件前的写法

    // 加载路由组件
    import foo from 'views/foo';
    import bar from 'views/bar';
    // 路由懒加载
    const baz = () => import('views/baz');
    const routes = [
      { path: '/foo', component: foo },
      { path: '/bar', component: bar },
      { path: '/baz', component: baz },
    ];
    
    const router = new VueRouter({routes});
    const app = new Vue({
      router
    }).$mount('#app')

这样看下来，好像没有什么问题。但是没有一个真正的项目只有三个路由，更何况真正做业务时更多的会有父子路由嵌套。再看下面代码，你会明白点什么...

        import foo from 'views/foo';
        import foo1 from 'views/foo1';
        import foo11 from 'views/foo11';
        import foo12 from 'views/foo12';
        import foo2 from 'views/foo2';
        import foo21 from 'views/foo21';
        import foo22 from 'views/foo22';
        import bar from 'views/bar';
        // 路由懒加载
        const baz = () => import('views/baz');
        ...
        
        const foo = {
          template: `
             <router-view></router-view>
          `
        }
        const routes = [
          { 
              path: '/foo',
              component: foo,
              children:[
                  {
                      path:'foo1',
                      component: foo1,
                      children:[
                          {
                              path:'foo11',
                              component: foo11,
                              children:[
                                  // 可以自己想象，不再列举
                                  ...
                              ]
                          },
                          {
                              path:'foo12',
                              component: foo12,  
                              children:[
                                  // 可以自己想象，不再列举
                                  ...
                              ]
                          }
                      ]
                  },
                  {
                      path:'foo2',
                      component: foo2,
                      children:[
                          {
                              path:'foo21',
                              component: foo21,
                              children:[
                                  // 可以自己想象，不再列举
                                  ...
                              ]
                          },
                          {
                              path:'foo22',
                              component: foo22,  
                              children:[
                                  // 可以自己想象，不再列举
                                  ...
                              ]
                          }
                      ]
                  },
              ]
          },
          { path: '/bar', component: bar },
          { path: '/baz', component: baz },
          ...
        ];
        
        const router = new VueRouter({routes});
        const app = new Vue({
          router
        }).$mount('#app')

脾气不好的我，写到这儿,已经有点想砸电脑了。但是，真实的业务场景，小项目也不至于就这几个路由吧.....

使用该插件后的写法

const config = {
    // 进入应用的默认路由
    default: 'app.foo.foo1',
    routes: [
        // 容器路由
        {state: 'foo', type: 'blank'},
        // 父子用‘.’分割
        {state: 'foo.foo1'},
        {state: 'foo.foo1.foo11'},
        {state: 'foo.foo1.foo12'},
        {state: 'foo.foo2'},
        {state: 'foo.foo2.foo21'},
        {state: 'foo.foo2.foo22'},
        {state: 'bar', type: 'blank'},
        {state: 'baz', type: 'blank'},
    ]
};

上面的代码就是使用该插件之后的路由配置文件，有没有发现一个路由只用了一行，真的是只有一行，不能再多了。

二、Usage

默认使用者已经对vue框架以及webpack有了一些了解，并且已经对vue-cli默认生成的项目结构有过至少一面之缘。本插件的用法需要你对自己的项目做出以下调整。

1、下载

    npm install vue-routes-design --save

2、webpack配置文件

本插件对webpack的配置有一个特殊要求，即在webpack配置文件中对src目录定义一个别名。请在自己的webpack配置文件的相应位置加上这行代码。因为作者的项目中，webpack配置文件是在build/base.js下，所以路径写的是path.resolve(__dirname, '../src/')，使用者需要根据自己的项目目录稍作调整。

        ...
      resolve:{
        alias: {
          app: path.resolve(__dirname, '../src/'),  // 请在自己的webpack配置文件中的对应位置加上此行代码,src的相对路径请根据实际情况做调整
        }
      },
      ...

3、main.js中引用

    import Vue from 'vue';
    import Router from 'vue-router';
    import routesDesign from 'vue-routes-design';
    import main from 'app/main.vue';
    Vue.use(Router);
    
    // config其实应该独立为一个配置文件，import进来，此处只是为了方便演示才写到此处
    const config = {
        default: 'app.user.index',
        routes: [
            // 登陆
            {state: 'login'},
    
            // 应用主体
            {state: 'app', defaultLink: 'app.user.index'},
    
            // 我的账户
            {state: 'app.user', type: 'blank', defaultLink: 'app.user.index'},
            {state: 'app.user.index'},
            {state: 'app.user.new'},
            {state: 'app.user.edit', params: '/:id'},
    
            // demo1
            {state: 'app.demo1', type: 'blank'},
            // demo1.1
            {state: 'app.demo1.demo11', type: 'blank'},
            {state: 'app.demo1.demo11.index'},
            {state: 'app.demo1.demo11.new'},
            {state: 'app.demo1.demo11.edit', params: '/:id'},
            // demo1.2
            {state: 'app.demo1.demo12', type: 'blank'},
            {state: 'app.demo1.demo12.index'},
    
        ]
    };
    // 调用create方法，则会把config的配置转换成vue-router要求的格式
    const routes = routesDesign.create(config);
    
    const router = new Router({routes});
    // 挂载dom
    const root = document.createElement('div');
    document.body.appendChild(root);
    const vm = new Vue({
        render: (h) => {
            return h(main)
        },
        router,
    });
    vm.$mount(root);