Vue学习笔记【29】——Vue路由（命名视图实现经典布局）

命名视图实现经典布局

1. 标签代码结构：

 <div id="app">
     <router-view></router-view>
     <div class="content">
       <router-view name="a"></router-view>
       <router-view name="b"></router-view>
     </div>
   </div>
 ​

2. JS代码：

 <script>
     var header = Vue.component('header', {
       template: '<div class="header">header</div>'
     });
 ​
     var sidebar = Vue.component('sidebar', {
       template: '<div class="sidebar">sidebar</div>'
     });
 ​
     var mainbox = Vue.component('mainbox', {
       template: '<div class="mainbox">mainbox</div>'
     });
 ​
     // 创建路由对象
     var router = new VueRouter({
       routes: [
         {
           path: '/', components: {
             default: header,
             a: sidebar,
             b: mainbox
           }
         }
       ]
     });
 ​
     // 创建 Vue 实例，得到 ViewModel
     var vm = new Vue({
       el: '#app',
       data: {},
       methods: {},
       router
     });
   </script>
 ​

3. CSS 样式：

   <style>
     .header {
       border: 1px solid red;
     }
 ​
     .content{
       display: flex;
     }
     .sidebar {
       flex: 2;
       border: 1px solid green;
       height: 500px;
     }
     .mainbox{
       flex: 8;
       border: 1px solid blue;
       height: 500px;
     }
   </style>
 ​