Vue.js學習系列一 —— vue-router2學習實踐筆記（附DEMO）

想學習Vue的SPA應用，路由這一塊是必不可少的。相信不少和我同樣剛接觸前端的朋友對於路由這玩意是很困惑的。因此在我學習併成功使用了vue-router後，將個人我的經驗分享出來，但願可讓一樣對路由不知所措的同窗有所幫助。

注意：

• 本文demo的項目結構用的是最新的命令行工具建立的webpack項目模板；

• 本文知識點是基於Vue2.0和vue-route 2的，更多內容請參考Vue.js官網和vue-router 2官方文檔：

1、路由的安裝：

npm安裝

可使用npm直接安裝插件

npm install vue-router --save

執行命令完成vue-router的安裝，並在package.json中添加了vue-router的依賴。當咱們在其餘電腦上安裝項目時只須要執行npm install便可完成安裝。（感謝 @waynezheng、@昊哥哥 指出的關於dependency的問題，已更正^-^。）

package.json

"dependencies": {
    ...
    "vue-router": "^2.1.1"
    ...
  },

若是是要安裝在開發環境下，則使用如下命令行：

npm install vue-router --save-dev

package.json

"devDependencies": {
    ...
    "vue-router": "^2.1.1",
    ...
  },

2、SPA中路由的簡單實現（附demo）

下面讓咱們來配置路由並實現咱們的第一次頁面跳轉。
官方提供的demo很簡單，複製到HTML中也的確能跑，可是問題是不知道如何在SPA應用中使用，這坑了我很多時間。在看了很多他人的項目後，完成了SPA路由的簡單實現demo（基於vue-cli的webpack模板）。
main.js

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import Page01 from './components/page01'
import Page02 from './components/page02'

Vue.use(VueRouter)//全局安裝路由功能
//定義路徑
const routes = [
  { path: '/', component: Page01 },
  { path: '/02', component: Page02 },
]
//建立路由對象
const router = new VueRouter({
  routes
})

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  router
})

App.vue

<template>
  <div id="app">
    <router-link to="/">01</router-link>
    <router-link to="/02">02</router-link>
    <br/>
    <router-view></router-view>
  </div>
</template>

page01.vue

<template>
  <div>
    <h1>page02</h1>
  </div>
</template>

page02.vue

<template>
  <div>
    <h1>page02</h1>
  </div>
</template>

代碼很簡單，具體能夠看下DEMO
實現步驟：

1. npm安裝vue-router

2. Vue.use(VueRouter)全局安裝路由功能

3. 定義路徑數組routes並建立路由對象router

4. 將路由注入到Vue對象中

5. 在根組件中使用<router-link>定義跳轉路徑

6. 在根組件中使用<router-view>來渲染組件

7. 建立子組件

3、路由的跳轉

router-link

router-link標籤用於頁面的跳轉，簡單用法如上demo

<router-link to="/page01">page01</router-link>

點擊這個router-link標籤router-view就會渲染路徑爲/page01的頁面。
注意：router-link默認是一個a標籤的形式，若是須要顯示不一樣的樣子，能夠在router-link標籤中寫入不一樣標籤元素，以下顯示爲button按鈕。

<router-link to="/04">
    <button>to04</button>
</router-link>

router.push

下面咱們經過JS代碼控制路由的界面渲染，官方是寫法以下：

// 字符串
router.push('home')
// 對象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 帶查詢參數，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

那麼問題來了，若是是全局註冊的路由Vue.use(VueRouter)，應該怎麼寫呢？

// 字符串
this.$router.push('home')
// 對象
this.$router.push({ path: 'home' })
// 命名的路由
this.$router.push({ name: 'user', params: { userId: 123 }})
// 帶查詢參數，變成 /register?plan=private
this.$router.push({ path: 'register', query: { plan: 'private' }})

push方法其實和<router-link :to="...">是等同的。
注意：push方法的跳轉會向 history 棧添加一個新的記錄，當咱們點擊瀏覽器的返回按鈕時能夠看到以前的頁面。

router.replace

push方法會向 history 棧添加一個新的記錄，而replace方法是替換當前的頁面，不會向 history 棧添加一個新的記錄。用法以下
template

<router-link to="/05" replace>05</router-link>

script

this.$router.replace({ path: '/05' })

router.go

go方法用於控制history記錄的前進和後退

// 在瀏覽器記錄中前進一步，等同於 history.forward()
this.$router.go(1)
// 後退一步記錄，等同於 history.back()
this.$router.go(-1)
// 前進 3 步記錄router.go(3)
// 若是 history 記錄不夠用，那就默默地失敗唄
this.$router.go(-100)
this.$router.go(100)

其實很好理解：go方法就是瀏覽器上的前進後退按鈕，後面的參數就是前進和後退的次數

4、路由的傳參方式

在路由跳轉的過程當中會傳遞一個object，咱們能夠經過watch方法查看路由信息對象。

watch: {
  '$route' (to, from) {
      console.log(to);
      console.log(from);
  },
},

console中看到的路由信息對象

{
    ...
    params: { id: '123' },
    query: { name: 'jack' },
    ...
}

這兩個參數會在頁面跳轉後寫在路徑中，路徑至關於/page/123?name=jack

1. params

其實這個params我仍是有一些疑惑的，就好比下面的寫法：

<router-link :to="{ path: '/05', params: { sex: 'hello param', sex2: 'hello param2' }, query: { name: 'hello query', name2: 'hello query2' }}">05</router-link>

傳遞過去的數據卻沒有包含params的數據。

{
    ...
    params: {},
    query: {
        name: 'hello query',
        name2: 'hello query2'
    }
    ...
}

下面是我暫時調試成功的一些結論。

傳遞數據

在路由配置文件中定義參數

//命名路由&路由傳參
  { name: 'com03', path: '/03/:sex', component: Page03 },

路徑後面的/:sex就是咱們要傳遞的參數。

this.$router.push({ path: '/03/441'})

此時路由跳轉的路徑

http://localhost:8080/#/03/441

此時咱們看到查看路由信息對象：

{
    ...
    params: {
        sex: '441'
    }
    ...
}

獲取數據

template

<h2> {{ $route.params.sex }} </h2>

script

console.log(this.$route.params.sex)

注：暫時我只發如今動態路由匹配中傳入數據能夠獲取到params。而使用{ path: '/', params: { sex: '123' }, query: { ...}}傳遞的數據使用沒有傳遞給下一個頁面組件。若是有使用成功的同窗歡迎在留言，我會及時更正的。

2. query

query傳遞數據的方式就是URL常見的查詢參數，如/foo?user=1&name=2&age=3。很好理解，下面就簡單寫一下用法以及結果

傳遞數據

template

<router-link :to="{ path: '/05', query: { name: 'query', type: 'object' }}" replace>05</router-link>

script

this.$router.replace({ path: '/05', query: { name: 'query', type: 'object' }})

路徑結果

http://localhost:8080/#/05?name=query&type=object

路由信息對象

{
    ...
    query: {
        name: "query",
        type: "object"
    }
    ...
}

獲取數據

獲取數據和params是同樣的。
template

<h2> {{ $route.query.name }} </h2>

script

console.log(this.$route.query.type)

Vue.js學習系列

做者最近正在惡補Vue的各類知識，但願可以系統的掌握Vue的開發知識。有興趣的同窗能夠查看以前發佈的文章：
Vue.js學習系列一 —— vue-router2學習實踐筆記（附DEMO）
Vue.js學習系列二 —— vuex學習實踐筆記（附DEMO）
Vue.js學習系列三——axios和網絡傳輸相關知識的學習實踐
Vue.js學習系列四——Webpack打包工具的使用
Vue.js學習系列五 —— 從VUE-CLI來聊聊ESLint

Vue.js學習系列項目地址（項目暫時有點亂，以後會進行整理優化。）

本文源碼已收入到GitHub中，以供參考，固然能留下一個star更好啦^-^。
https://github.com/violetjack...

關於做者

VioletJack，移動、前端工程師，兩年移動端工做經驗、一年前端工做經驗。現專一於移動前端的學習和開發。擅長Android開發和Vue前端開發。會按期產出關於Android、Vue、移動前端相關的博文。歡迎你們關注我，我會用心維護和經營好博客，多產出高質量文章。同時也但願我所寫的東西能夠幫到有須要的朋友。
新浪微博： http://weibo.com/u/2640909603
掘金：https://gold.xitu.io/user/571...
CSDN: http://blog.csdn.net/violetja...
簡書： http://www.jianshu.com/users/...
Github： https://github.com/violetjack