在一个页面中有两个以上的<router-view>区域。
在App.vue文件
<router-view></router-view> <router-view name="left" style="float: left;width: 50%;background: #ccc;height: 300px"></router-view> <router-view name="right" style="float: right;width: 50%;background: #c0c;height: 300px"></router-view>
在路由文件中重新配置一下
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', components:{ default:HelloWorld, left:Hi1, right:Hi2 } }, { path:'/Hi', name: 'Hi', components:{ default:Hi, left:Hi1, right:Hi2 }, } ] })
效果如上图。未能深刻理解