组件模板结合(组件群)

import Vue from 'vue'
// 引入vue
import VueRouter from 'vue-router'
// 引入vue路由
// 使用vue路由
Vue.use(VueRouter)
// 定义模板
const First = { template: '<div>First的第一个内容</div>' }
const second = { template: '<div>secode的内哦荣</div>' }
const Home = { template: '<div>根目录的内容的内容</div>' }
// eslint-disable-next-line standard/object-curly-even-spacing
const hehe = { template: '<div>hehe的内容</div>'}

const router = new VueRouter({
  // 模式history,记住就好
  mode: 'history',
  //    当前的根目录为基础路径
  base: __dirname,
  //   注意注意：这里的不是router，也不是routers，而是routes
  routes: [
    { path: '/',
      components: {
        default: Home,
        left: First,
        right: second
      }},
    { path: '/first',
      components: {
        // eslint-disable-next-line no-undef
        default: hehe,
        left: First,
        one: second
      }}
  ]
})
// 写模板
new Vue({
  router,
  template: `
     <div id='r'>
      <h1>导航</h1>
      <p>{{$route.name}}</p>
       <ol>
            <li><router-link to='/'>/</router-link></li>
            <li><router-link to='/first'>First</router-link></li>
       </ol>

    //    <router-view></router-view>呈现页面的  
       <router-view name="left" style="float:left;height:200px;width:50%;background-color:red;"></router-view>  
       <router-view name="right" style="float:left;height:200px;width:50%;background-color:blue;"></router-view>  
       <router-view name="one" style="float:left;height:200px;width:50%;background-color:black;"></router-view>  
     </div>
    `
}).$mount('#app')