Vue问题汇总

1. vue-router多层级（大于2层）时无法显示children中的页面？例如，

Level-01-Grandfather: routers/index.vue

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);

import Father from './father/index';

const Home = () => import('.......');

export default new Router({
  routes: [
    {
      path: '/',
      component: Home,
      children: [
        Father
      ]
    }
  ]
})

Level-02-Father: routers/father/index.vue

import Son from './son/index';

export default {
  path: 'father',
  name: 'Father',
  children: [
    Son
  ]
}

Level-03-Son: routers/father/son/index.vue

const SonView = () => import('......');


export default {
  path: 'son',
  name: 'Son',
  component: SonView
}

当访问'/father/son/‘时，页面应显示SonView中的内容，实际上页面为空。根据vue-router文档，在嵌套时须增加<router-view>标签，为页面内容预留位置。在本例中，则为在routers/father/index.vue中添加如下代码：

import Son from './son/index';

export default {
  path: 'father',
  name: 'Father',


  component: {
    template: `<router-view></router-view>`
  },


  children: [
    Son
  ]
}

也可新建文件，在routers/father/index.vue中引入，并作为Father的component。