[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