在学习vue的时候,根据官方教程卸了嵌套路由,结果页面空白
router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import login from '@/components/layout/login'
import LayoutHeader from '@/components/layout/LayoutHeader'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/login',
name: 'login',
component: login,
children: [
{
path: '/header',
component: LayoutHeader
}
]
}
]
})
在地址栏中输入路由,一片空白。
父组件中<router-view/>
也加了。
解决
修改上述代码,将path: '/header'
改为path: '/login/header'
{
path: '/login',
name: 'login',
component: login,
children: [
{
path: '/login/header',
component: LayoutHeader
}
]
}
问题解决,但是感觉好麻烦,官方给的例子明明不是这么写的,在逗我。
解决,更新版
还是那个代码把'/header'
的斜杠去掉变成'header'
就行了,难受。
子组件无法渲染。一般有两种情况:
- 父组件没有
<router-view/>
- 子路由配置时加了一个斜杠
'/'
人家官方写得明明白白,没有斜杠,是我逗。