生活随笔
收集整理的這篇文章主要介紹了
一个路径下挂载(匹配)多个子组件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果圖如下
<!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;height: 600px;}.container .left {background: lightgreen;flex: 2;}.container .main {background-color: lightpink;flex: 8;}</style></head><body><div id="app"><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: "/",components: {default: header,left: leftBox,main: mainBox}}]});var vm = new Vue({el: "#app",data: {},methods: {},router});</script></body>
</html>
總結
以上是生活随笔為你收集整理的一个路径下挂载(匹配)多个子组件的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
