Vue 項目嚐鮮（五）路由切換

前言 前面咱們在把 vue 項目搞起來了，也懂一點基本的操做，可是咱們以前都是在 HelloWorld.vue 那個文件裏面搞的，很明顯咱們一個項目不可能就只有那麼一個視圖的吧，咱們通常是須要切換不一樣視圖頁面的，這個時候就要講到咱們的 vue-router 的了，在此在此以前我建議你先去看一下官方文檔瞭解一下。

1 準備

咱們既然要進行視圖路由切換，那麼原有的目錄結構，就不夠咱們用啦，這個時候咱們要在 src 目錄下新建一個 views 文件夾，用來存放視圖文件（也是 vue 文件啦）。

而後咱們既然要切換路由，固然就要搞多幾個視圖頁面啦，咱們在 views 文件夾裏面搞多幾個 vue 文件，因爲咱們以前已經默認裝 vue-router，因此引入掛載那些咱們都不用幹了，咱們直接到 router/index.js 文件裏面引入視圖組件，而後放到 視圖表裏面就好了，具體以下

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 引入 兩個視圖組件
import Demo1 from '../views/demo1.vue'
import Demo2 from '../views/demo2.vue'
import Demo3 from '../views/demo3.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    // 添加到視圖表裏面，path 路由地址，name 路由名稱，component 對應的組件
    {
      path: '/demo1',
      name: 'Demo1',
      component: Demo1
    },
    {
      path: '/demo2',
      name: 'Demo2',
      component: Demo2
    },
    {
      path: '/demo3',
      name: 'Demo3',
      component: Demo3
    },
  ]
})

咱們這樣配完後，輸入路由地址
http://localhost:8080/#/demo2 就能看到到對應的視圖頁面了。

2 路由切換 & 傳參

固然咱們不能說每次都在瀏覽器裏面輸入地址，而後切換視圖啦。因此咱們確定有用代碼切換路由的方法

2.1 router-link 標籤

這個標籤和 a 標籤同樣，點擊後跳轉，to 屬性指定跳轉路由的地址，像下面這點擊後叫跳到 /demo2 那邊去了。

<router-link to="/demo2">頁面2</router-link>

2.2 編程導航

固然咱們不能每次跳都經過點擊連接來切換，因此咱們還能夠經過函數來跳轉，這邊的話，vue-router 提供了幾個方法給咱們用，咱們先簡單看一下

// 導航到新路由並在 histroy 棧添加一條記錄
router.push(location, onComplete?, onAbort?)

// 跟 router.push 很像，惟一的不一樣就是，它不會向 history 添加新記錄，而是跟它的方法名同樣 —— 替換掉當前的 history 記錄。
router.replace(location, onComplete?, onAbort?)

// 這個方法的參數是一個整數，意思是在 history 記錄中向前或者後退多少步，相似 window.history.go(n)。
router.go(n)

咱們就以 push 方法做爲示範。

// 字符串
this.$router.push('demo3')

// 對象
this.$router.push({ path: 'demo3' })


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

// 帶參數的函數跳轉，咱們在目標頁面可使用 this.$route.query.plan 獲取參數

關於 vue-router 的跳轉大概就說這麼多了，可是 vue-router 毫不僅僅只有這些，這些只是一個基本常見的操做，他裏面還有不少的東西值得咱們去學習，咱們 vue 項目嚐鮮系列就寫到這邊了，說實話，這個對於學習知識來講沒啥用，可是可讓你本身心安一下，知道之後咋用 vue 進行工程化開發。

最後仍是那句話，老老實實回去看文檔學習，加油！