参考：

参考：

分别给router-view定义一个name，默认显示的可以不用定义

自己先在components文件夹内写4个组件，准备放入4个router-viewer标签，我的分别是

containerLeft.vue   

containerRight.vue  

containerTop.vue  

containerBottom.vue

 

app.vue

路由文件router/index.js

核心：

 

import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import Veaflet from '@/components/Veaflet'import containerLeft from '@/components/containerLeft'import containerRight from '@/components/containerRight'import containerTop from '@/components/containerTop'import containerBottom from '@/components/containerBottom'import lefttree from '@/components/lefttree'Vue.use(Router)// 创建一个路由器实例// 并且配置路由规则const router = new Router({  routes: [    {      path: '/',      name: 'Veaflet',      meta:{title:'Veaflet'},      components:{        default: Veaflet,        left:containerLeft,        right:containerRight,        logo:containerTop,        bottom:containerBottom      }    },    {      path: '/HelloWorld',      name: 'HelloWorld',      meta:{title:'HelloWorld'},      component: HelloWorld    },    {      path: '/containerLeft',      name: 'containerLeft',      meta:{title:'containerLeft'},      component: containerLeft    },    {      path: '/lefttree',      name: 'lefttree',      meta:{title:'lefttree'},      component: lefttree    }  ]})  //修改动态网页标题 beforeEach 导航钩子，路由改变前触发  router.beforeEach((to,from,next) =>{    //window.document.title = to.meta.title;    window.document.title = to.name;    next();  })  router.afterEach((to,from,next) =>{    window.scrollTo(0,0);  })  export default router;

　运行效果如图：