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

来源：cnblogs　　作者：一直在路上aiori　　时间：2021/5/7 10:39:44　　对本文有异议

  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 class="header">这是header</h1>',
 70         created() {
 71             console.log(this.$route.query) //vue-router 提供的用于访问url参数
 72         }
 73     }
 74     let comobj2 = {
 75         template: '<h1 class="left">这是左侧nav</h1>',
 76         created() {
 77             console.log(this.$route)
 78         }
 79     }
 80     let comobj3 = {
 81         template: '<h1 class="main">这是主体</h2>',
 82         created() {
 83             console.log(this.$route)
 84         }
 85     }
 86     let comobj4 = {
 87         template: '<h1 class="main">这是底部</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>