vue路由命名视图

命名视图

一个页面展示多个组件，在路由规则中使用components

1. 显示
   通过多个路由容器显示，给每个路由容器指定name属性的值

<div id="app">
    <router-view name="top"></router-view>
    <div class="container">
      <router-view name="left"></router-view>
      <router-view name="right"></router-view>
    </div>
    <router-view name="bottom"></router-view>

  </div>

2. 创建组件

const header={
      template:`<h1 class="header">头部</h1>`
    }
    const sidebar={
      template:`<h1 class="sidebar">左侧边栏</h1>`
    }
    const content={
      template:`<h1 class="content">右侧内容区域</h1>`
    }
    const footer={
      template:`<h1 class="footer">底部</h1>`
    }

3. 创建路由对象
   使用conponents(注意不是component)
   给每个组件指定显示位置

 const router = new VueRouter({
      routes: [
        //一个页面展示多个组件
        {path:'/',components:{
          'top':header,
          'left':sidebar,
          'right':content,
          'bottom':footer
        }},
        
      ]
    })