前言

通過前面我寫的VUE入門部落格，相信已經大概瞭解VUE是何物，但是對於細節性的問題我們還是有些忽略，有很多網友希望我能繼續寫相關部落格，但是由於工作繁忙原因一直無空去寫，終於得空於是協知識歸來。

2017年一定是VUE火熱的一年，引得無數人飛蛾撲火，對於前端大神來說輕鬆入手，對於剛剛接觸這一行的同學來說，vue的官方文件還是太過與欠缺資訊，如此我決定帶你們去踩坑。

對稍微瞭解VUE的人來說，我們都知道Vue.js（讀音 /vjuː/，類似於 view） 是一套構建使用者介面的漸進式框架。其採用自底向上增量開發的設計。如果你有用過Angular，知道它是MVC(模型 - 檢視 - 控制器)

結構的，而VUE 是MVVM的，即Vue 的核心庫只關注檢視層，檢視依賴與資料，它不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與單檔案元件和 Vue 生態系統支援的庫結合使用時，Vue 也完全能夠為複雜的(SPA)單頁應用程式提供驅動。

但是這只是定義，有些人連SPA是什麼都不知道(SPA-單頁應用)，更不知道MVVM是為何物？請準備好你的雙手

開啟專案

VUE是有一個配套開發元件的他叫：element(餓了麼元件)，如圖：

為了方便大家跟上我，我決定做一個初始模板放在github上，各位請使用git拉一下專案：vuetemplate，如果有不知道git怎麼用的請看我的部落格:

git+github的使用-最簡單的入門教程

如果實在是不知道git怎麼用我會貼出程式碼，但是前提是你有信心解決那些問題。

重要的事情說三遍：這裡不負責解決任何程式碼之外的事情，但是還是好意給你們指條明路！
這裡不負責解決任何程式碼之外的事情，但是還是好意給你們指條明路！
這裡不負責解決任何程式碼之外的事情，但是還是好意給你們指條明路！

使用git拉下來我的程式碼，用atom開啟目錄如圖：

不會使用git拉檔案的請去GitHub上下載壓縮包。

在本地開啟資料夾，先npm install，然後npm run dev，讓它跑起來。效果如圖：

注意如果npm安裝不合適請使用cnpm，見淘寶映象
 

這裡做了一個假的登陸，輸入yanmo，密碼：123，進入。這個專案整個構建都是完整，你們如果初入門就多看看我的目錄結構構建，以及路由的使用。

路由簡單使用

vue官網所給的路由使用很初級，我們在專案構建的時候並不會這樣子，開啟專案/src/routes/index.js，程式碼如下：

import frame from '../frame/frame.vue'
import index from '../page/index.vue'
import home from '../page/home.vue'
import login from '../page/login.vue'

import introduction from '../page/introduction/index.vue'
import introductionDetails from '../page/introduction/details.vue'

import introductionDetailspage from '../page/introduction/detailspage/detailspage.vue'

import advanced from '../page/advanced/index.vue'
import advancedDetails from '../page/advanced/details.vue'

import advancedDetailspage from '../page/advanced/detailspage/detailspage.vue'

// 配置路由
export default [
  {
    path: '/',
    component: index
  },
  {
    path: '/login',
    component: login
  },
  {
    path: '/home',
    component: home
  },
  {
    path: '/introduction',
    component: frame,
    children: [
      {path: '', component: introduction},
      {path: 'details', component: introductionDetails},
      {path: 'detailspage', component: introductionDetailspage}
    ]
  },
  {
    path: '/advanced',
    component: frame,
    children: [
      {path: '', component: advanced},
      {path: 'details', component: advancedDetails},
      {path: 'detailspage', component: advancedDetailspage}
    ]
  }
]

這是正確的路由構建方式，我們通過import…form匯入我們的檔案模組，component（元件）引入我們需要的模組，path則是網頁上的url，同時路由的使用離不開<router-view></router-view>，在/src/App.vue中：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style lang="scss">
  @import "./style/style";
</style>

<router-view></router-view>承接路由的元件，其本質是根據url的不同來進行元件的各種切換罷了。如果url是‘/login’它就切換成login.vue，如果url是‘/home’它就切換成home.vue。

同理，我們就可以使用另外一個<router-view></router-view>來實現子路由的切換，在component（元件）引入<router-view></router-view>再加一個屬性children就可以了，例如：

const Foo = { template: '<router-view></router-view>' }
import introduction from '../page/introduction/index.vue'
import introductionDetails from '../page/introduction/details.vue'
import introductionDetailspage from '../page/introduction/detailspage/detailspage.vue'
export default [
{
    path: '/introduction',
    component: Foo,
    children: [
      {path: '', component: introduction},
      {path: 'details', component: introductionDetails},
      {path: 'detailspage', component: introductionDetailspage}
    ]
  }
]

我們可以通過/introduction進入’../page/introduction/index.vue’元件，/introduction/details進入’../page/introduction/details.vue’元件

同時在.vue檔案中實現路由的函式式操作也是我們經常用的，比如我們需要按鈕點選跳轉：在/src/page/index.vue

<el-button type="info" @click="$router.push('/login')" size="small">前往登入</el-button>

$router.push('/login')是this.$router.push('/login')的簡化，其是vue-router的程式設計式的導航
，即除了使用 建立 a 標籤來定義導航連結，我們還可以藉助 router 的例項方法，通過編寫程式碼來實現。

router.push 方法。這個方法會向 history 棧新增一個新的記錄，所以，當用戶點選瀏覽器後退按鈕時，則回到之前的 URL。

router.go(n) 方法。在 history 記錄中向前或者後退多少步，類似 window.history.go(n)。

// 在瀏覽器記錄中前進一步，等同於 history.forward()
router.go(1)

// 後退一步記錄，等同於 history.back()
router.go(-1)

// 前進 3 步記錄
router.go(3)

同時我們還可以帶引數：

router.push({ name: 'login', params: { userId: 123 }})

還可以帶查詢條件：

// 帶查詢引數，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

路由的資訊獲取-$route物件

首先，我們稱呼 routes 配置中的每個路由物件為 路由記錄。路由記錄可以是巢狀的，因此，當一個路由匹配成功後，他可能匹配多個路由記錄。

類似/introduction/details這個 URL 將會匹配父路由記錄以及子路由記錄。

一個路由匹配到的所有路由記錄會暴露為$route物件，$route物件存了很多資訊，有時我們需要取一些資訊就得使用它：

有時我們在路由路徑傳遞了id，如{path: 'edit/:id', component: newsEdit}，這裡:id指的是一個變數叫id，我們有時需要用到這個id，我們可以在$route物件下的params屬性中取到他，即this.$route.params.id，就可以取到路由的id變數的值，同時我們也可以取其他變數的名字，這些路由路徑的變數都存在params屬性中。

控制檯log如圖：

同時，請區分$route物件和$router物件的區別。這兩個不是一個東西你們可以在控制檯輸出一下看看區別。

路由資訊物件的屬性：

1. $route.path: 字串，對應當前路由的路徑，總是解析為絕對路徑，如 “/foo/bar”。
2. $route.params: 一個 key/value 物件，包含了 動態片段 和 全匹配片段，如果沒有路由引數，就是一個空物件。
3. $route.query: 一個 key/value 物件，表示 URL 查詢引數。例如，對於路徑 /foo?user=1，則有 $route.query.user == 1，如果沒有查詢引數，則是個空物件。
4. $route.hash: 當前路由的 hash 值 (帶 #) ，如果沒有 hash 值，則為空字串。
5. $route.fullPath: 完成解析後的 URL，包含查詢引數和 hash 的完整路徑，如 “/foo/bar?urseid=11”。
6. $route.matched: 一個數組，包含當前路由的所有巢狀路徑片段的 路由記錄 。路由記錄就是 routes 配置陣列中的物件副本（還有在 children 陣列）。

<router-link>

元件支援使用者在具有路由功能的應用中點選導航。通過 to 屬性指定目標地址，預設渲染成帶有正確連結的<a>標籤，可以通過配置 tag 屬性生成別的標籤.。另外，當目標路由成功啟用時，連結元素自動設定一個表示啟用的 CSS 類名。

其預設屬性：

1. to: 表示目標路由的連結。當被點選後，內部會立刻把 to 的值傳到router.push()，所以這個值可以是一個字串或者是描述目標位置的物件。

<!-- 使用 v-bind 的 JS 表示式 -->
  <router-link v-bind:to="'home'">Home</router-link>
  <!-- 不寫 v-bind 也可以，就像繫結別的屬性一樣 -->
  <router-link :to="'home'">Home</router-link>
  <!-- 同上 -->
  <router-link :to="{ path: 'home' }">Home</router-link>
  <!-- 命名的路由 -->
  <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

1. replace: 設定 replace 屬性的話，當點選時，會呼叫router.replace()而不是router.push()，於是導航後不會留下 history 記錄。會發生路由替換

<router-link :to="{ path: '/abc'}" replace></router-link>

1. tag: 有時候想要 渲染成某種標籤，例如
2. 。 於是我們使用 tag prop 類指定何種標籤，同樣它還是會監聽點選，觸發導航。

 <router-link to="/foo" tag="li">foo</router-link>
  <!-- 渲染結果 -->
  <li>foo</li>

小結：

至此路由的基本知識就結束了，例如懶載入等不常用的，這裡不做多解。

重要的事情說三遍：`<router-view></router-view>`承接路由的元件，其本質是根據url的不同來進行元件的各種切換罷了。
`<router-view></router-view>`承接路由的元件，其本質是根據url的不同來進行元件的各種切換罷了。
`<router-view></router-view>`承接路由的元件，其本質是根據url的不同來進行元件的各種切換罷了。

也許你們現在不懂，等到了元件的講解，你們就明白了。

提示：在最近幾天我會慢慢附上VUE系列教程的其他後續篇幅，後面還有精彩敬請期待，請大家關注我的專題：web前端。如有意見可以進行評論，每一條評論我都會認真對待。