(四) 单页面多路由区域操作

本节知识点

• 主要就是实现在一个页面内显示多个<router-view>组件

使用

• 我们现在的需求就是在首页显示多个组件。那么该怎么做

使用步骤

• 第一步在要使用的页面内添加 多个router-view

    <router-view></router-view>
    <router-view name="left" style="width:50%;height:400px;background:red;float:left"></router-view>
    <router-view name="right" style="width:50%;height:400px;background:blue;float:left;"></router-view>

这里特别注意的就是 router-view必须要有name属性

• 第二步 在路由里面设置components属性注意一定要加S

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hi from '@/components/Hi'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
     //这里就是要加载你要显示的组件 对应name
      components: {
        default: HelloWorld,
        left: Hi1,
        right: Hi2,
      }
    },
    {
      path:'/hi',
      name:"Hi",
      component:Hi,
      children:[

        {path:"hi1",name:"Hi1",component:Hi1},
        {path:"hi2",name:"Hi2",component:Hi2},
      ]
    }
  ]
})