命名视图-实现一个路由规则展示多个组件！！！

  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组件的时候，命名视图就很适合做这份差事！

特别声明：本站所收录作品、热点评论等信息来源互联网，目的只是为了系统归纳学习和传递资讯所有作品版权归原创作者所有，与本站立场无关，图文源自网络，如有侵权，请联系删除！请联系我们邮箱：908164873@qq.com/电话：187-8421-3206，我们将做删除处理！

相关文章