1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <script src="../../js/vue.js"></script> 9 <script src="../../js/vue-router.js"></script> 10 </head> 11 <style> 12 .myactive { 13 color: red; 14 font-size: 24px; 15 } 16 17 html body h1 { 18 margin: 0; 19 padding: 0 20 } 21 22 .header { 23 background-color: orange; 24 } 25 26 .container { 27 display: flex; 28 } 29 30 .left { 31 flex: 2; 32 background-color: red; 33 } 34 35 .main { 36 flex: 8; 37 background-color: green; 38 } 39 </style> 40 41 <body> 42 <div id="app"> 43 <!-- 命名試圖實作經典布局--> 44 45 46 <router-view></router-view> 47 <div class="container"> 48 <router-view name='left'></router-view> 49 <!-- 設定了 name屬性的router-view 只有在routes components中配置為【left：組件名】的組件才會展示到這里 --> 50 <router-view name='main'></router-view> 51 </div> 52 <router-view name='bottom'></router-view> 53 54 55 56 57 58 59 60 61 </div> 62 63 64 </body> 65 <script> 66 Vue.config.devtools = true; 67 //vue-rourer.js 被引入后，window全域就會多了一個VueRouter這樣一個建構式，可以new 一個路由配置實體 68 let comobj1 = { 69 template: '<h1 >這是header</h1>', 70 created() { 71 console.log(this.$route.query) //vue-router 提供的用于訪問url引數 72 } 73 } 74 let comobj2 = { 75 template: '<h1 >這是左側nav</h1>', 76 created() { 77 console.log(this.$route) 78 } 79 } 80 let comobj3 = { 81 template: '<h1 >這是主體</h2>', 82 created() { 83 console.log(this.$route) 84 } 85 } 86 let comobj4 = { 87 template: '<h1 >這是底部</h2>', 88 created() { 89 console.log(this.$route) 90 } 91 } 92 93 94 95 let routerobj = new VueRouter({ 96 routes: [ //注意此處為 routes 不是 routers 97 { 98 path: '/', 99 components: { //此處除了可以用component指定展示特定的組件外，還可以使用components物件來展示若干組件 100 'default': comobj1, //router-view 默認展示鍵為default的組件 101 'left': comobj2, //router-view 命名 name='left'，就會展示這個comobj2組件 102 'main': comobj3, ////router-view 命名 name='main'，就會展示這個comobj3組件 103 'bottom': comobj4, 104 } 105 }, 106 107 ] 108 109 }) 110 111 let vm = new Vue({ 112 el: '#app', 113 data: { 114 115 }, 116 methods: { 117 118 }, 119 120 router: routerobj //將路由實體與vue實體關聯起來，注冊路由實體 121 }) 122 </script> 123 124 </html>
總結：命名視圖使用場景，當一個路由規則匹配成功，想要展示多個組件的時候，命名視圖就很適合做這份差事！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/285906.html
標籤：Html/Css
上一篇：html