router-view:页面显示路由组件内容,默认显示defalut组件内容,如果要显示多个组件内容需要使用带有name属性,来显示具名路由;带有name属性的router-view需放在父级路由页面。
路由配置router/index.js
routes: [
{
path:'/home',
name:'Home',
components:{ //命名多组件
default:Home, //默认渲染组件
'his':History //命名组件
}
}
]
home.vue页面设置
<div class="home">
<Header></Header>
<router-view></router-view>//这里显示默认的组件Home
<div class="container">
<router-view name="his"></router-view>//这里显示组件名为his的组件History
</div>
</div>
网友评论