學習vue2教程中的簡單路由

這是實例的代碼html

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

環境部分

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

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

回車,再輸入git

e:github

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

npm install算法

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

npm run devjson

運行服務器和項目,成功後在瀏覽器中打開 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()

相關文章
相關標籤/搜索