Vue.js 命名视图实现经典布局

素颜马尾好姑娘i 2022-03-17 14:26 210阅读 0赞

## 命名视图实现经典布局 ##

1.  标签代码结构：

1.  JS代码：

1.  CSS 样式：

代码：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="./lib/vue-2.4.0.js"></script>
      <script src="./lib/vue-router-3.0.1.js"></script>
      <style>
        html,
        body {
          margin: 0;
          padding: 0;
        }
    
        .header {
          background-color: orange;
          height: 80px;
        }
    
        h1 {
          margin: 0;
          padding: 0;
          font-size: 16px;
        }
    
        .container {
          display: flex;
          height: 600px;
        }
    
        .left {
          background-color: lightgreen;
          flex: 2;
        }
    
        .main {
          background-color: lightpink;
          flex: 8;
        }
      </style>
    </head>
    
    <body>
      <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">mainBox主体区域</h1>'
        }
    
        // 创建路由对象
        var router = new VueRouter({
          routes: [
            /* { path: '/', component: header },
            { path: '/left', component: leftBox },
            { path: '/main', component: mainBox } */
    
    
            {
              path: '/', components: {
                'default': header,
                'left': leftBox,
                'main': mainBox
              }
            }
          ]
        })
    
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {},
          methods: {},
          router
        });
      </script>
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70]: /images/20220317/1573bcc735e745f08a3e907cf341e3ba.png