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

使用vue做spa應(yīng)用的話，一定會涉及到路由。

安裝

安裝router插件

npm install vue-router

router的基本使用步驟

引入router插件——>配置路由——>實例化路由——>根實例注冊路由——>頁面掛載路由節(jié)點(diǎn)

router.js編寫

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

引入router插件

實例化VueRouter

mode:

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

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

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

routes配置介紹

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

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

在router.js文件末尾導(dǎo)出路由配置

緊接著在根實例注冊router

在app中掛載路由頁面

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

頁面訪問

比如routes配置如下：

頁面訪問地址：

頁面跳轉(zhuǎn)

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

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

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

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

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

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

動態(tài)路由

靜態(tài)路由：path中的路徑是寫死的

動態(tài)路由：能傳遞參數(shù)的路由模式，由于可以傳遞參數(shù)，所以其對應(yīng)的路由數(shù)量是不確定的，故稱之為 動態(tài)路由

那么如何將參數(shù)作為路由呢？

在參數(shù)名前面加上 : ，然后將參數(shù)寫在路由的 path 內(nèi)

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

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

如何給路由傳參呢？

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

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

上面的鏈接對應(yīng)就為：http://localhost:8080/__dirname/books/1

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

如何將這些參數(shù)讀取出來呢？

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

在相應(yīng)的組件頁面內(nèi)輸出參數(shù)值，對應(yīng)代碼如下：

<p>當(dāng)前圖書編號是：{{$route.params.id}}</p>

如果想在js代碼中根據(jù)參數(shù)值做相應(yīng)的處理，則在默認(rèn)路由中加入如下代碼：

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

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

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

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

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

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

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

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

動態(tài)路由組件復(fù)用造成的問題

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

那么，當(dāng)復(fù)用組件時候，想對路由參數(shù)的變化做出響應(yīng)的話，就需要在 $watch 對象內(nèi)添加對 $route 對象變化的跟蹤函數(shù)

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

路由鉤子

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

鉤子函數(shù)根據(jù)其生效的范圍可以分為 全局鉤子函數(shù)、路由獨(dú)享鉤子函數(shù)和組件內(nèi)鉤子函數(shù)。

全局鉤子

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

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

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

三個參數(shù)：

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

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

next('/') 或者 next({ path: '/' }): 跳轉(zhuǎn)到一個不同的地址。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個新的導(dǎo)航。

某個路由獨(dú)享鉤子

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

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

組件內(nèi)鉤子

更細(xì)粒度的路由攔截，只針對一個進(jìn)入某一個組件的攔截。

首先看一下官方定義：

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

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

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

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

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

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

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

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

  }
}

鉤子函數(shù)使用場景

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

其他知識點(diǎn)

滾動行為

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

參考文章：

Vue.js 中的動態(tài)路由

Vue-Router模式、鉤子

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

vue里的路由鉤子

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。