文章目錄

vue路由

一個站點由很多頁面組成，需要在不同的頁面之間切換

在vue中，可以把每個頁面看作是一個組件，頁面的切換，實際上就是組件的切換顯示

除了可以手動的實現組件切換，還可以利用vue路由

安裝

vue路由的核心功能，就是根據不同的頁面地址，切換到不同的組件進行顯示
要實現這一點，需要用到vue-router庫

在頁面上引入vue-router庫
創建一個VueRouter對象

vue-router庫提供了一個構造函數VueRouter，通過它可以創建一個對象

var router = new VueRouter({
  //配置
})

配置中，將提供路由的各種信息，比如什麼地址對應什麼組件

將創建的對象配置到vue實例中

接下來，你需要將剛剛創建好的對象配置到vue實例中

new Vue({
  // 其他配置
  router
})

這樣一來，vue中就加入了路由的功能

組件切換的位置

現在，你需要告訴vue，當地址變化時，在何處切換組件

當vue中配置了VueRouter對象後，會自動的全局註冊一些組件

其中一個組件名爲RouterView

該組件的作用，是用於標記組件在哪裏進行切換

<div>
  <!-- 頭部不動 -->
  <header>
    <a href="#/">首頁</a>
    <a href="#/movie">電影</a>
  </header>
  <!-- 僅在這裏切換組件 -->
  <router-view />
</div>

路由規則配置

在創建VueRouter實例時，可以填寫很多配置，其中最重要的，就是路由規則配置

new VueRouter({
  // 路由規則是一個數組，數組中每一項是一條規則
  routes: [
    { //規則1
      name: "home", // 規則名稱
      path: "/",  // 當匹配到路徑 / 時
      component: Home // 在 router-view 位置渲染 Home 組件
    },
    { //規則2
      name: "movie-list",  // 規則名稱
      path: "/movie",  // 當匹配到路徑 /movie 時
      component: Movie  // 在 router-view 位置渲染 Movie 組件
    }
  ]
})

此時，當你訪問index.html#/時，將看到首頁，訪問index.html#/movie時將看到電影頁

路由模式配置

使用何種路由模式，決定了路由從哪裏讀取地址

vue-router支持三種模式：

hash【默認值】
history
abstract

無論是什麼模式，vue-router最終會拿到地址，然後根據路由配置切換組件

hash模式兼容性最好
history模式地址更優雅，但兼容性稍差，並且需要webpack的開發服務器配合才能完整的實現
abstract模式可以適用於任何環境，如node、移動端，瀏覽器端也能用，不過由於地址變化發生在內存，無法從地址欄感知到

路由跳轉

超鏈接跳轉

router-link組件

除了使用a元素跳轉頁面，還可以使用vue-router提供的組件router-link

雖然該組件最終也會呈現爲一個a元素，但使用它更利於代碼的維護

<router-link to="/">首頁</router-link>
<router-link to="/movie">電影頁</router-link>

router-link會根據路由的模式，自動生成對應的a元素，上面的代碼最終生成

<a href="#/">首頁</a>
<a href="#/movie">電影</a>

這樣一來，就解除了鏈接和模式的耦合，模式的變化，不會影響鏈接的書寫

匹配的類樣式

router-link組件還會匹配當前的地址和鏈接的地址，如果能夠匹配，則會自動的添加一個類樣式，這非常有利於我們通過樣式來控制超鏈接的選中狀態

比如，當前訪問的地址是index.html#/movie

則生成的a元素是:

<a href="#/" class="router-link-active">首頁</a>
<a href="#/movie" class="router-link-exact-active router-link-active">電影</a>

router-link-active，該類樣式只要開始部分匹配上即會添加
router-link-exact-active，該類樣式只有全部匹配上纔會添加

命名路由

如果在配置路由規則的時候，給某個路由規則指定了name，則該路由叫做命名路由

router-link組件允許你通過name的值生成a元素

<router-link :to="{name:'home'}">首頁</router-link>
<router-link :to="{name:'movie-list'}">電影頁</router-link>

生成的結果

<a href="#/">首頁</a>
<a href="#/movie">電影</a>

這樣一來，又解除了路徑和鏈接的耦合，將來路徑的變化不會影響到鏈接的代碼

代碼跳轉

有的時候，我們可能需要用代碼的形式來完成跳轉

除了location.href的傳統方式外，vue-router還提供了一套API來幫助你完成這件事

和a元素的替代方案一樣，利用這些API跳轉頁面，更利於代碼的維護

在history和abstract模式中，必須使用這些API跳轉頁面

vue-router在vue實例中注入了兩個屬性：$route和$router

$route

該屬性是一個對象，記錄了當前匹配的信息

例如訪問地址爲http://localhost:5000/index.html#/movie?page=1&limit=2#abc

在組件中打印出this.$route將會得到

{
  name: "movie-list", // 匹配到的路由名稱
  path: "/movie", // 匹配到的路徑
  hash: "#abc", // 路徑的hash部分
  query: {page: "1", limit: "2"}, // 路徑的query部分
  fullPath: "/movie?page=1&limit=2#abc" // 匹配到的完整地址
}

$route中還有一些信息，需要到進階才能理解

$router

該屬性仍然是一個對象，對象中提供了一些方法用於跳轉路由

this.$router.push("/movie")  // 跳轉到路徑 /movie 
this.$router.push({
  name:"movie-list"
})  // 跳轉到命名路由 movie-list
this.$router.go(-1)  // 類似於 history.go(-1)
this.$router.back() // 等同於 this.$router.go(-1)
this.$router.forward() // 等同於 this.$router.go(1)

動態路由

假設有一個電影詳情頁，詳情頁需要根據電影的id來獲取電影對象，然後渲染組件

那麼電影詳情頁的地址中就需要包含電影的id

比如/movie/1，這樣的地址要匹配到詳情頁，並且1表示要顯示的電影的id；movie/2，這樣的地址也要匹配到詳情頁，並且2是電影的id

這裏就涉及到三個問題：

如何把動態地址（地址某一部分會變化）匹配到組件
如何在組件中獲取到動態部分的內容
路由跳轉時，如何優雅的告知動態內容

匹配動態地址

在路由規則的配置中，path的配置實際上並不簡單的是一個字符串，而是一個符合glob pattern規則的字符串

glob pattern 是一個類似於正則表達式的字符串

只要訪問的地址匹配上了path，就能匹配到對應的組件

所以，可以用以下代碼來書寫一個動態地址

{
  path: "/movie/:id", // :id 是動態的部分，id是動態部分的名字
}

這樣一來，如果訪問/movie/3，則會匹配上這個規則，同時，vue-router會把3記錄下來，放到名爲id的屬性中

獲取動態內容

只要匹配到了動態地址，動態部分的數據就已經被記錄下來，放到了$route.params屬性中

只需要到該屬性中獲取即可

比如要獲取id的值：

this.$route.params.id

路由跳轉時傳遞動態內容

<router-link :to="{name:'movie-detail', params:{ id: 123}}">電影詳情頁</router-link>
//相當於 var obj = {name : "movie-detail", params: {id: 123}}
//movie/123

this.$router.push("/movie/123");
this.$router.push({
  name:"movie-detail",
  params:{
    id:123
  }
})

vue路由知識詳解