vue路由—实现经典布局（同一个路由，对应多个组件）

要点：

1.router-view头部，侧边栏，主体内容区域三个区域，每个有一个占位符。

2.占位符定义一个name属性，跟components的第一个属性对应，这里component使用复数，同一个路由下匹配多个组件。

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-router.js"></script>
    
    <style>
        .header{
            margin-top: 25px;
            background-color: gray;
            height: 125px;
        }
        .container{
            display:flex;
            /*flex左右布局,一共十份，bootstrap的栅格12份*/
            height: 575px;
        }
        .left{
            background-color: gainsboro;
            flex: 2.5;
        }
        .main{
            background-color: honeydew;
            flex: 7.5;
        }
        
        h1{
            padding: 0px;
            margin: 0px;
        }
    </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>
          <!--头部，侧边栏，主体内容区域三个区域，每个有一个占位符-->
          <!--name是为了将components中的多个组件一一对应起来-->
          
      </div>

      <script>
          
          var header = {
              template: '<h1 class="header">head头部区域</h1>'
          };
          
          var leftNav = {
              template: '<h1 class="left">left侧边栏</h1>'  
          };
          
          var mainContent = {
              template: '<h1 class="main">main主体内容</h1>'
          };
          
          var router = new VueRouter({
             routes:[
                 {path:'/', components:{
                     default:header,
                     'left':leftNav,
                     'main':mainContent
                 }}
                 //这里使用复数components，第一个属性与router-view中的name对应，第二个是表示要展示的组件名字    
             ] 
          });
          
          
          
          var vm = new Vue({
             el:'#app',
             router
          });
      </script>
</body>
</html>

效果：

vue路由—实现经典布局（同一个路由，对应多个组件）

猜你喜欢