Vue筆記整理,專題之路由:8、路由-命名視圖實現經典佈局(放多個路由組件、實現多視圖)

目錄

一、前言

二、路由-命名視圖實現經典佈局

1、需要的實現效果展示

2、使用命名視圖

 (1)代碼-命名視圖

(2)效果展示-命名視圖

3、實現經典佈局-寫樣式

(1)給三個組件的模板對象,添加樣式-顏色

(2)給三個組件的模板對象,定義佈局,flex實現下方左右佈局

(3)取消多餘邊距

三、最終修改代碼


一、前言

上一篇文章我們介紹了路由-使用children屬性實現路由嵌套,詳細可參考博文:原創 Vue筆記整理,專題之路由:7、路由-使用children屬性實現路由嵌套 ,這篇文章我們將介紹:路由-命名視圖實現經典佈局。

 

二、路由-命名視圖實現經典佈局

1、需要的實現效果展示

 

2、使用命名視圖

 (1)代碼-命名視圖

<!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>11.路由-命名視圖實現經典佈局</title>
  <script src="./lib/vue-2.4.0.js"></script>

  <!-- 步驟1: 安裝 vue-router 路由模塊 -->
  <script src="./lib/vue-router-3.0.1.js"></script>

  <style>

  </style>

</head>

<body>
  <div id="app">

    <!-- 步驟5: 展示匹配到的組件 
    //其中router-view標籤的name屬性值,
    //對應路由匹配規則,components中的屬性名,
    //沒有指定name,即對應的屬性名爲default
    -->
    <router-view></router-view>
    <router-view name="left"></router-view>
    <router-view name="main"></router-view>

  </div>

  <script>

    //步驟3:創建,三個組件的模板對象
    var header = {
      template: '<h1>Header頭部區域</h1>'
    }

    var leftBox = {
      template: '<h1>Left側邊欄區域</h1>'
    }

    var mainBox = {
      template: '<h1>mainBox主體區域</h1>'
    }

    //步驟2:創建路由對象,定義 routes匹配規則
    var router = new VueRouter({
      routes: [
        // 這樣寫是不行的
        // { path: '/', component: header },
        // { path: '/left', component: leftBox },
        // { path: '/main', component: mainBox }

        // 這裏不使用 component,使用 components,
        // 表示這個根路徑路由下,可以有多個組件
        { path: '/', components: {
            'default': header,//屬性名 : 屬性值(組件),
            'left': leftBox,
            'main': mainBox
          }
        }

      ]
    })

    // 創建 Vue 實例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      //步驟4: 通過router屬性,將路由規則對象,註冊到 vm 實例上。
      // router: router
      router //如上面屬性值和屬性名完全一樣,可以簡寫成這樣。
    });

  </script>
</body>

</html>

這裏代碼作了詳細註釋,就不多說了。

關鍵是:router-view標籤的name屬性值 對應  components中的屬性名

 

(2)效果展示-命名視圖

運行程序,效果如下圖:

這樣命名視圖就搞定了,那麼實現經典佈局,就差寫樣式了。

 

3、實現經典佈局-寫樣式

(1)給三個組件的模板對象,添加樣式-顏色

        

(2)給三個組件的模板對象,定義佈局,flex實現下方左右佈局

        

效果如下圖:

 

(3)取消多餘邊距

效果如下圖:

 

三、最終修改代碼

<!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>11.路由-命名視圖實現經典佈局</title>
  <script src="./lib/vue-2.4.0.js"></script>

  <!-- 步驟1: 安裝 vue-router 路由模塊 -->
  <script src="./lib/vue-router-3.0.1.js"></script>

  <style>

    html,
    body { /* 最外層邊距,進行取消 */
      margin: 0;
      padding: 0;
    }

    h1 { /* h1標籤邊距太大,進行取消 */
      margin: 0;
      padding: 0;
      font-size: 16px;
    }

    .header {
      background-color: orange;
      height: 80px;
    }

    .container{
      display: flex;/* flex實現下方左右佈局 */
      height: 600px;
    }

    .left {
      background-color: lightgreen;
      flex: 2;
    }

    .main {
      background-color: lightpink;
      flex: 8;
    }
    
  </style>

</head>

<body>
  <div id="app">

    <!-- 步驟5: 展示匹配到的組件 
    //其中router-view標籤的name屬性值,
    //對應路由匹配規則,components中的屬性名,
    //沒有指定name,即對應的屬性名爲default
    -->
    <router-view></router-view>
    <div class= "container">
          <router-view name="left"></router-view>
          <router-view name="main"></router-view>
    </div>


  </div>

  <script>

    //步驟3:創建,三個組件的模板對象
    var header = {
      template: '<h1 class="header">Header頭部區域</h1>'
    }

    var leftBox = {
      template: '<h1 class="left">Left側邊欄區域</h1>'
    }

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

    //步驟2:創建路由對象,定義 routes匹配規則
    var router = new VueRouter({
      routes: [
        // 這樣寫是不行的
        // { path: '/', component: header },
        // { path: '/left', component: leftBox },
        // { path: '/main', component: mainBox }

        // 這裏不使用 component,使用 components,
        // 表示這個根路徑路由下,可以有多個組件
        { path: '/', components: {
            'default': header,//屬性名 : 屬性值(組件),
            'left': leftBox,
            'main': mainBox
          }
        }

      ]
    })

    // 創建 Vue 實例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      //步驟4: 通過router屬性,將路由規則對象,註冊到 vm 實例上。
      // router: router
      router //如上面屬性值和屬性名完全一樣,可以簡寫成這樣。
    });

  </script>
</body>

</html>

 

 

 

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章