美文网首页
router-view:一个页面显示多个组件内容

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

作者: 牛妈代代 | 来源:发表于2019-07-23 10:43 被阅读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>

相关文章

网友评论

      本文标题:router-view:一个页面显示多个组件内容

      本文链接:https://www.haomeiwen.com/subject/gcxolctx.html