vue-routes-design

1.1.6 • Public • Published

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);

4、目录结构

本插件要求所有的路由组件必须放置在src/views文件夹下,并需按照父子路由的名称进行放置组件文件。

上面的路由结构以及对应的组件文件放置如图:

views目录结构 views目录结构

三、演示demo

如果还不是很明白,请看演示demo。如果您觉得该项目还有那么点意思,请给个star,多谢!!!

Readme

Keywords

Package Sidebar

Install

npm i vue-routes-design

Weekly Downloads

1

Version

1.1.6

License

ISC

Unpacked Size

43.1 kB

Total Files

7

Last publish

Collaborators

  • lvyl