一个路径下挂载(匹配)多个子组件

效果图如下
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Document</title><script type="text/javascript" src="./lib/vue-2.4.0.js"></script><script type="text/javascript" src="./lib/vue-router-3.0.1.js"></script><style type="text/css">html,body {margin: 0;padding: 0;}h1 {margin: 0;padding: 0;font-size: 16px;}.header {background-color: orange;height: 80px;}.container {display: flex;/* justify-content: space-around; */height: 600px;}.container .left {background: lightgreen;flex: 2;}.container .main {background-color: lightpink;flex: 8;}</style></head><body><div id="app"><!-- 不指定name 放默认default组件 --><router-view></router-view><div class="container"><!-- 放置对应名称组件 --><router-view name="left"></router-view><router-view name="main"></router-view></div></div><template id="tmpl1"><div class="header"><h1 v-text="msg1"></h1></div></template><template id="tmpl2"><div class="left"><h2 v-text="msg2"></h2></div></template><template id="tmpl3"><div class="main"><h3 v-text="msg3"></h3></div></template><script type="text/javascript">var header = {template: "#tmpl1",data() {return {msg1: "头部区域"};}};var leftBox = {template: "#tmpl2",data() {return {msg2: "左侧区域"};}};var mainBox = {template: "#tmpl3",data() {return {msg3: "主要内容区域"};}};// 创建路由对象var router = new VueRouter({routes: [//   { path: "/", component: header },//   { path: "/left", component: leftBox },//   { path: "/main", component: mainBox },{// 注册三个子组件(类似私有组件) 一个路径下挂载(匹配)三个子组件path: "/",components: {default: header,left: leftBox,main: mainBox}}]});// 创建 Vue实例，得到 ViewModelvar vm = new Vue({el: "#app",data: {},methods: {},router});</script></body>
</html>