Vue 路由--采用命名视图实现布局

 <div id="app">
       <router-view ></router-view>
       <div class="container">
        <router-view name="left"></router-view>
        <router-view name="main"></router-view>
       </div>
   </div>

   <script>
       var header = {
           template: '<h1 class="header">header 头部区域</h1>'
       }

       var leftBox = {
           template: '<h1 class="left">left 侧边栏区域</h1>'
       }

       var mainBox = {
           template: '<h1 class="main">main 主体区域</h1>'
       }

       var router = new VueRouter ({
           routes: [
               { path: '/', components: {
                   'default': header,
                   'left': leftBox,
                   'main': mainBox
               }}
           ]

       })

       var vm = new Vue ({
           el: '#app',
           data: {},
           methods: {},
           router          //  相当于  router: router
       })
   </script>

样式

   <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }
        .header {
            background-color: red;
            height: 80px;
        }

        .container {
            display: flex;
            height: 200px;
        }
        h1 {
            margin: 0;
            padding: 0;
            font-size: 20px;
        }
        
        .left {
            background-color: pink;
            flex: 2;
        }

        .main {
            background-color: green;
            flex: 8;
        }

    </style>