學習vue2教程中的簡單路由

這是實例的代碼

做爲一個新手，本文談的是我在學習 vue-2.0-simple-routing-example 的一些理解。操做系統爲 win7，如下：

環境部分

下載好程序包後，解壓到任意的盤，假設 e 盤。而後打開 cmd,跳往項目路徑，輸入

cd e:\vue-2.0-simple-routing-example-master

回車，再輸入

e:

回車，這樣咱們就到了項目路徑。而後輸入

npm install

創建項目環境和依賴。完成後輸入

npm run dev

運行服務器和項目，成功後在瀏覽器中打開 localhost:8080，這樣咱們就能看到實時的對項目的修改結果了。

項目代碼部分

main.js

webpack.config.js 中的 entry 屬性告訴咱們項目以 main.js 做爲入口。

main.js 首先引入 vue 和 routes，vue 很少說，routes 是路徑參數。

import 和 export 困擾了我好久，由於用 script 標籤引入 json 對象很方便，但在 node 環境開發中就很麻煩，因此理解它倆花了我不少功夫和時間。

import 用來引入函數、對象或者模塊，export 用來輸出函數、對象或者模塊，它們目前只能在 babel 等轉換器中實現，瀏覽器不支持。

而後建立實例，el 掛載 #app，currentRoute 由 window.location.pathname 獲得 '/'。

computed 屬性中的 ViewComponent 函數計算當前應該渲染的組件，由 routes[this.currentRoute] 獲得組件名稱。若是存在該組件，則加載該組件，若是不存在，則加載 404.vue 組件。

目前加載的是 Home.vue 組件。

Home.vue

home.vue 是主頁的組件，模板是

<template>
    <main-layout>
        <p>Welcome home</p>
    </main-layout>
</template>

結構與 About.vue 和 404.vue 相似。而後引入 MainLayout,來自 Main.vue 組件。

這裏有個 slot 的知識點。

除非子組件模板包含至少一個 <slot> 插口，不然父組件的內容將會被丟棄。當子組件模板只有一個沒有屬性的 slot 時，父組件整個內容片斷將插入到 slot 所在的 DOM 位置，並替換掉 slot 標籤自己。

父組件 Home.vue 的<p>Welcome home</p>會插入到 Main.vue 中<slot></slot>所在的位置。

當 Main.vue 做爲子組件渲染完畢後，Home.vue 做爲對象export給父組件 <div id="app"></div>

Main.vue

main.vue 的做用是頁面的佈局，模板是

<template>
  <div class="container">
    <ul>
      <li>
        <v-link href="/">Home</v-link>
        <v-link href="/about">About</v-link>
      </li>
    </ul>
    <slot></slot>
  </div>
</template>

v-link，這是這個案例的核心。

而後引入VLink。

當 VLink.vue 做爲子組件渲染完畢後，Main.vue 做爲對象 export 給父組件Home.vue

Vlink.vue

VLink.vue組件渲染連接，模板是

<template>
  <a
    v-bind:href="href"
    v-bind:class="{ active: isActive }"
    v-on:click="go"
  >
    <slot></slot>
  </a>
</template>

在 js 代碼段引入 routes 獲得地址參數，v-bind:href="href" 綁定連接地址，第一個 href 須要 props 的聲明，不然出現未定義錯誤，這裏還用到了類型檢測。

v-bind:href 的值來自 Main.vue 中的 <v-link href="/">Home</v-link>的"/"。

在 Main.vue 中有兩個 v-link 組件，渲染第二個 v-link 時，v-bind:href 的值是"/about"。

slot插值的算法參看Home.vue

v-bind:class 綁定類，這影響到連接的樣式。

computed 屬性計算 isactive 的值，若是和 this.$root.currentRoute 的值相同，class 顯示 isactive，不然不顯示。

v-on:click綁定鼠標點擊事件，點擊後運行go函數。

event.preventDefault()防止默認行爲，這裏是頁面跳轉。

this.$root.currentRoute = this.href變動組件路徑，行爲反饋到main.js的ViewComponent ()，實例中的 render 從新渲染組件。

window.history.pushState()是瀏覽器的歷史記錄API，是HTML5的新API。

history.pushState()