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。