如何在一个页面使用多个router-view显示不同的内容

首先:路由配置如下

routes: [
    {
      path:'/',
      name:'Home',
      components:{
        default:Home,
        'his':History
      }
    }
]

上面的代码主要是把component变成components,然后default默认显示哪个组件,
其余的多个组件分别起一个名字,然后在要显示的位置加上router-view,
一般有name属性的router-view写在App.vue文件中,

<div id="app">
      <Header></Header> 
      <router-view></router-view>//这里显示默认的组件Home
      
      <div class="container">
        <router-view name="his"></router-view>//这里显示组件名为his的组件History
      </div>
</div>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容