路由文檔：https://router.vuejs.org/zh/guide/

使用vue做spa應用的話，一定會涉及到路由。

安裝

安裝router插件

npm install vue-router

router的基本使用步驟

引入router插件——>配置路由——>實例化路由——>根實例注冊路由——>頁面掛載路由節點

router.js編寫

在src下新建一個router.js， 接下來編寫這個router.js

引入router插件

實例化VueRouter

mode:

默認為hash，但是用hash模式的話，頁面地址會變成被加個#號比較難看了， http://localhost:8080/#/linkParams/xuxiao
所以一般我們會采用 history模式，它會使得我們的地址像平常一樣。http://localhost:8080/linkParams/xuxiao

base
應用的基路徑。例如，如果整個單頁應用服務在 /app/ 下，然后 base 就應該設為 "/app/"。
一般寫成 __dirname，在webpack中有配置。

routes
routes就是我們的大核心了，里面包含我們所有的頁面配置。

routes配置介紹

path 就是我們的訪問這個頁面的路徑
name 給這個頁面路徑定義一個名字，當在頁面進行跳轉的時候也可以用名字跳轉，要唯一喲
component 組件，就是咱們在最上面引入的 import ...了，當然這個組件的寫法還有一種懶加載

懶加載的方式，我們就不需要再用import去引入組件了，直接如下即可。懶加載的好處是當你訪問到這個頁面的時候才會去加載相關資源，這樣的話能提高頁面的訪問速度。
component: resolve => require(['./page/linkParamsQuestion.vue'], resolve)

在router.js文件末尾導出路由配置

緊接著在根實例注冊router

在app中掛載路由頁面

<div id="app">
  <h1>Hello App!</h1>
  <!-- 路由出口 -->
  <!-- 路由匹配到的組件將渲染在這里 -->
  <router-view></router-view>
</div>

頁面訪問

比如routes配置如下：

頁面訪問地址：

頁面跳轉

1、使用router-link，注意to的值要和router.js文件中配置的path一致。

2、還可以在方法里利用 this.$router.push('xxx') 來進行跳轉。

// 字符串,這里的字符串是路徑path匹配噢，不是router配置里的name
this.$router.push('home')

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

// 命名的路由 這里會變成 /user/123
this.$router.push({ name: 'user', params: { userId: 123 }})

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

動態路由

靜態路由：path中的路徑是寫死的

動態路由：能傳遞參數的路由模式，由于可以傳遞參數，所以其對應的路由數量是不確定的，故稱之為 動態路由

那么如何將參數作為路由呢？

在參數名前面加上 : ，然后將參數寫在路由的 path 內

routes: [
    //將頁面組件與path指令的路由關聯
    { name: 'BookInfo', path: '/books/:id', component: BookInfo }
  ]

這樣定義之后，vue-router就會匹配所有的：/books/1,/books/2,/books/3 ……，所以說這樣定義的路由的數量是不確定的。

如何給路由傳參呢？

1、在<router-link> 我們加入一個 params 屬性來指定具體的參數值

       <li>
          <router-link :to ="{name:'BookInfo',params :{id:1}}" >
            <div>首頁</div>
          </router-link>
        </li>

上面的鏈接對應就為：http://localhost:8080/__dirname/books/1

如果需要傳入多個參數值，只要按照上面的命名方法來加入參數，傳遞在params中對應的聲明參數值即可，vue-router只要匹配到路由模式的定義就會自動對參數進行分解取值
如 path: '/books/:version/:id'，則對應params為：params :{id:1,version:1}

如何將這些參數讀取出來呢？

通過 $route.params這個屬性獲取指定的參數值

在相應的組件頁面內輸出參數值，對應代碼如下：

<p>當前圖書編號是：{{$route.params.id}}</p>

如果想在js代碼中根據參數值做相應的處理，則在默認路由中加入如下代碼：

export default {
  name: "app",
  created() {
    alert(this.$route.params.id);
  }
};

2、使用 "/path?param = value" 的方式傳遞參數

{ name: 'BookInfo', path: '/books/:id/?bookName=Lost', component: BookInfo }

使用 "/path?param = value" 的方式傳遞參數，可以使用$route.query.參數名 獲取參數值

獲取其中 bookName 的值的代碼為 this.$route.query.bookName

3、vue-router 還提供一種常量參數定義 meta(路由元信息),可以放一些key-value進去，方便在鉤子函數執行的時候用。我們可以在路由定義中先定義 meta 的值，然后在路由實例中通過$route.meta 參數獲取具體常量值。

{ name: 'BookInfo', path: '/books/:id', component: BookInfo ,meta: { bookName : 'Lost In River' }}

獲取其中 bookName 的值的代碼為 this.$route.meta.bookName

動態路由組件復用造成的問題

當使用路由參數的時候，如 從/books/1 到 /books/2 ，原來的組件實例會被復用，因為兩個路由都渲染同一個組件，比起銷毀后再創建，復用的銷率會更高。
這也就是說 組件的生命周期鉤子不會再被調用(組件沒有被銷毀后再創建) ，即 created mounted 等鉤子函數在頁面第二次加載的時候回失效。

那么，當復用組件時候，想對路由參數的變化做出響應的話，就需要在 $watch 對象內添加對 $route 對象變化的跟蹤函數

<script>
export default {
  name: "app",
  watch :{
    '$route' (to,from){
      alert(to.params.id);
    }
  }
};
</script>

路由鉤子

路由鉤子主要是給使用者在路由發生變化時進行一些特殊的處理而定義的，比如當路由跳轉前或跳轉后，進入、離開某一個路由前、后，就可以使用路由鉤子來監聽路由的變化。

鉤子函數根據其生效的范圍可以分為 全局鉤子函數、路由獨享鉤子函數和組件內鉤子函數。

全局鉤子

直接在路由配置文件中寫的鉤子函數,在進入此路由配置時,可以做一些全局性的路由攔截。

router.beforeEach((to, from, next) => {
 //會在任意路由跳轉前執行，next一定要記著執行，不然路由不能跳轉了
 console.log('beforeEach')
 console.log(to,from)
 //
 next()
})
//
router.afterEach((to, from) => {
 //會在任意路由跳轉后執行
 console.log('afterEach')
})

我們在params路由里配置了beforeEnter得鉤子函數，函數我們采用了ES6的箭頭函數，需要傳遞三個參數。我們并在箭頭函數中打印了to和from函數。具體打印內容可以在控制臺查看object。

三個參數：

to:路由將要跳轉的路徑信息，信息是包含在對像里邊的。
from:路徑跳轉前的路徑信息，也是一個對象的形式。
next:路由的控制參數，常用的有next(true)和next(false)。

next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了（可能是用戶手動或者瀏覽器后退按鈕），那么 URL 地址會重置到 from 路由對應的地址。

next('/') 或者 next({ path: '/' }): 跳轉到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。

某個路由獨享鉤子

就像說的一樣，給某個路由單獨使用的，本質上和后面的組件內鉤子是一樣的。都是特指的某個路由。不同的是，這里的一般定義在router當中，而不是在組件內。如下

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      },
      beforeLeave: (to, from, next) => {
        // ...
      }
    }
  ]
})

組件內鉤子

更細粒度的路由攔截，只針對一個進入某一個組件的攔截。

首先看一下官方定義：

你可以在路由組件內直接定義以下路由導航鉤子
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

路由組件!路由組件!路由組件!重要的事情說三遍，大家一定要注意這里說的是“路由組件”，而路由組件！== 組件，路由組件！== 組件，路由組件！== 組件！之前一直沒注意這點，然后在子組件里面傻乎乎的調鉤子函數發現一直沒用。

我們先來看一下什么是路由組件？

路由組件：直接定義在router中component處的組件

也就是說router中定義的入口vue文件之外的組件，是沒有鉤子函數的，也就不用說使用了。但是如果你使用了并不會報錯，只是沒反應。

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染該組件的對應路由被 confirm 前調用
    // 不！能！獲取組件實例 `this`
    // 因為當鉤子執行前，組件實例還沒被創建
   ...
    next()

  },
  beforeRouteUpdate (to, from, next) {
    // 在當前路由改變，但是該組件被復用時調用
    // 舉例來說，對于一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
    // 由于會渲染同樣的 Foo 組件，因此組件實例會被復用。而這個鉤子就會在這個情況下被調用。
    // 可以訪問組件實例 `this`
    ...
 next()

  },
  beforeRouteLeave (to, from, next) {
    // 導航離開該組件的對應路由時調用
    // 可以訪問組件實例 `this`
   ...
 next()

  }
}

鉤子函數使用場景

其實路由鉤子函數在項目開發中用的并不是非常多，一般用于登錄態的校驗，沒有登錄跳轉到登錄頁；權限的校驗等等。當然隨著項目的開發進展，也會有更多的功能可能用鉤子函數實現會更好，我們知道有鉤子函數這個好東西就行了，下次遇到問題腦海就能浮現，噢，這個功能用鉤子實現會比較棒。我們的目的就達到了。當然，有興趣的可以再去研究下源碼的實現。開啟下腦洞。

其他知識點

滾動行為

在利用vue-router去做跳轉的時候，到了新頁面如果對頁面的滾動條位置有要求的話，可以利用。

參考文章：

Vue.js 中的動態路由

Vue-Router模式、鉤子

Vue2.0 探索之路——vue-router入門教程和總結

vue里的路由鉤子

總結

以上是生活随笔為你收集整理的vue学习之router的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。