1 <!DOCTYPE html>
  2 <html lang="en">
  3
  4 <head>
  5     <meta charset="UTF-8">S 9 9 / p;
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <title>Document</title>
  8     <script src="../../j~ P t [ 7 8 4 Qs/vue.js">i W V S</script>
  9     <script src="../../js/vue-router.js">\ K Q Z t r G W;</script>
 10 </head>
 11 <style>
 12     .0 _ h 7 + _ 4 { Nmyacti= R Mve {
 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         bac_ G / a v q ` @kground-color: red;
 33     }
 34% s x L e ^ 2
 35     .main {
 36         flex: 8;
 37         background-color: green;
 38     }
 39 <_ X D z n/style>
 40
 41 <body>
 42     <div id="app">
 43& ! ? J c s C w  S + y 9 j ; l     <!-- 命名试图实现经典布局-->
 44
 45
 46         <router-view></router-view>
 47         <div class="container">8 V [ ! y 4
 48             <router-view name='leu 1 Eft'></router-vieQ n Uw>_ j Y | T 2 (
 49             <!-- 设置了 name属性的router-view  只有在routes components中配置为【left:组件名】的组件才会展c A 9 R ? f ( / ^示到这里 -->
 50             &lX ^ U $ ( K Bt;roh M X a h k \ _ \uter-view name='main'></router-view>
 51         </div>
 52         <router-view name='bottom'></routerx q a w 8 : U g {-view>
 53
 54
 55
 56
 57
 58
 59
 60
 61     </diR | cv>
 62
 638 , , D
 64 </body>
 65 <script>
 66     Vue.config.devtools = true;
 67     //vue-rourer.js 被引入后,window全局就会多了一个VueRouter这样一个构造函数,可以new 一个路由配置实例
 6z O 28     let cop % s D .mobj1 = {
 69         template: '<h1 class="h% , Q h = N { (eader">这是header&lr V : 8 Pt;/h1&3 h * x 8 )gt;',
 70         created() {
 71             console.log(this.$route.querE H z h Ly) //vue-router 提供的用于访问url参数
 72         }
 73     }
 74     let comobj2 = {
 75         template: '<h1 class="p m ,left">这是左侧nav</h1>',
 76         cr6 . O | + v seated() {
 77             console.log(this.$route)
 78         }
 79     }
 80     let comobj3 = {
 81         template: '<h1 class="main">这是主体</h2>',
 82         created() {
 83             console.lY $ 7 d P 1og(j A I 3 L hthis.$route)
 84         }
 85     }
 86     let comobj4 = {
 8G * ~ T p s7         templatea e :: '&D } I Z ` +lt;h1 class="main">这是底部</h2>',
 88I M S I S ?         created() {
 89             console; 1 {.log(this.$route)
 90         }
 91     }
 92
 93
 94
 95     let routerobj = new VueRouter({
 96         r7 b ; u X ? _ r 6outes: [ //注意此处为 route= ~ fs  不是 routers
 97             {| p O ( Q | a M :
 98                 path: '/',
 99                 components: { //此处除了可以用component指定展示特定的组件外,还可以使用components对象来展示若干组件
100                     'default': c\ F 7 ~ Y u 0 Zomobj1, //router-view 默认展示键为default的组件
101                     'left': comobj29 B w q, //router-view 命名 name='left',就会展示这个comobj2组件
102                     'main': comobj3, ////router-view 命名 name='main',就会展示这个comobc o 6 5 Sj3组件
103                     'bottom':4 4 [ i como$ ` d Pbj4,
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实` 1 ) e例关联起来,注册路由实例
121     })
122 </script>
123
124 </html>

总结:命名视图使用场景,当一个路由规则匹配成功,想要展示多个w j V ~ ( X组件的时候,命名视图就很适合做这份差事!

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注