router-view:一个页面显示多个组件内容

2019-07-23  本文已影响0人  牛妈代代

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>
上一篇 下一篇

猜你喜欢

热点阅读