在router文件下的index.js 中配置了‘Hi’的子路由,但是点击跳转界面却不显示子路由的内容,但是url正常改变。
原因一:
没有在父路由中加上<router-view></router-view>,来将对应的组件内容渲染到router-view。
路由是负责将进入的浏览器请求映射到特定的 组件 代码中。 即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源(组件)的映射,通过一个路径的url地址,可以唯一找到一个资源。
解决方法:在父路由的template中加上<router-view></router-view>
<template>
<div class="hello">
<router-view></router-view>
</div>
</template>
原因二:
子路由path加了‘/’。
以“/”开头的嵌套路径会被当作根路径,所以子路由上不用加“/”;在生成路由时,主路由上的path会被自动添加到子路由之前,所以子路由上的path不用在重新声明主路由上的path了。
出错:
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/hi',
component: Hi,
children: [
{path: '/', component: Hi},
{path: '/hi2', component: Hi2},
{path: '/hi3', component: Hi3}
]
}
]
})
修改:
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/hi',
component: Hi,
children: [
{path: '/', component: Hi},
{path: 'hi2', component: Hi2}, //此处path去掉了‘/’
{path: 'hi3', component: Hi3} //此处path去掉了‘/’
]
}
]
})