[Vuejs] 关于vue-router里面的subRoutes

刚学习vue,可能有使用不对的地方,希望没有对大家造成困扰!

 

使用vue-router,为了能够更好的管理.vue文件,需要用到子路由。

 

先看个错误的例子

routers.js

        '/company':{               //公司
            name:'company',
            component: function (resolve) {
                require(['./views/company/index.vue'], resolve);
            }, 
            subRoutes: {
                '/about':{               //关于
                    component: function (resolve) {
                        require(['./views/company/about.vue'], resolve);
                    }
                }
            }
        },

上面的代码会引起什么问题呢?原因没找到,主要出现的问题如下:

 

查了各种地方,都没有找到问题所在。后来自己再根据vue-router的官方文档,弄了一下,发现最关键点在于这里:

// 嵌套的路由
  '/c': {
    component: {
      // 渲染子视图
      template: '<router-view></router-view>'
    },
    subRoutes: {
      // 当路径是 /c/d 时进行渲染
      '/d': { component: { template: 'D' }},
      // 当路径是 /c/e 时进行渲染
      '/e': { component: { template: 'E' }}
    }
  }

 

貌似是主路由,渲染了,子路由没地方渲染。

 

最后的解决方法是:

        '/company':{               //公司
            name:'company',
            component: {
                template: '<router-view></router-view>'
            }, 
            subRoutes: {
                '/':{               //关于
                    component: function (resolve) {
                        require(['./views/company/index.vue'], resolve);
                    }
                },
                '/about':{               //关于
                    component: function (resolve) {
                        require(['./views/company/about.vue'], resolve);
                    }
                }
            }
        },

 

如各位看到这篇文章,发现有误的地方,请多多交流

 

Have fun with Vuejs

 

posted @ 2016-05-24 16:32 DavidHHuan 阅读(...) 评论(...) 编辑 收藏