安裝

直接下載

在Vue后面加載vue-router攒读，它會(huì)自動(dòng)安裝的：

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

NPM

npm install vue-router

如果在一個(gè)模塊化工程中使用它，必須要通過Vue.use()明確地安裝路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

如果使用全局的script標(biāo)簽鹏秋，則無須如此 (手動(dòng)安裝)。

介紹

Vue Router是Vue.js官方的路由管理器燕雁。它和Vue.js的核心深度集成窒所，讓構(gòu)建單頁面應(yīng)用變得易如反掌楣嘁。包含的功能有：

• 嵌套的路由/視圖表
• 模塊化的磅轻、基于組件的路由配置
• 路由參數(shù)、查詢马澈、通配符
• 基于Vue.js過渡系統(tǒng)的視圖過渡效果
• 細(xì)粒度的導(dǎo)航控制
• 帶有自動(dòng)激活的CSS class的鏈接
• HTML5歷史模式或hash模式瓢省，在IE9中自動(dòng)降級(jí)
• 自定義的滾動(dòng)條行為

起步

用Vue.js + Vue Router創(chuàng)建單頁應(yīng)用，是非常簡(jiǎn)單的痊班。使用Vue.js勤婚，我們已經(jīng)可以通過組合組件來組成應(yīng)用程序，當(dāng)你要把Vue Router添加進(jìn)來涤伐，我們需要做的是馒胆，將組件 (components) 映射到路由 (routes)，然后告訴Vue Router在哪里渲染它們凝果。下面是個(gè)基本例子：

<script src="path/.../to/vue/dist/vue.js"></script>
<script src="path/.../to/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!--使用router-link組件來導(dǎo)航-->
    <!--通過傳入to屬性指定鏈接-->
    <!--<router-link>默認(rèn)會(huì)被渲染成一個(gè)<a>標(biāo)-->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的組件將渲染在這里 -->
  <router-view></router-view>
</div>

// 0.如果使用模塊化機(jī)制編程祝迂，導(dǎo)入Vue和VueRouter，要調(diào)用Vue.use(VueRouter)
// 1.定義（路由）組件
// 可以從其他文件import進(jìn)來
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2.定義路由
// 每個(gè)路由應(yīng)該映射一個(gè)組件器净。其中"component"可以是
// 通過Vue.extend()創(chuàng)建的組件構(gòu)造器型雳，或只是一個(gè)組件配置對(duì)象。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]
// 3.創(chuàng)建router實(shí)例山害，然后傳routes配置
// 你還可以傳別的配置參數(shù)
const router = new VueRouter({
  routes //（縮寫）相當(dāng)于routes:routes
})
// 4.創(chuàng)建和掛載根實(shí)例纠俭。
// 記得要通過router配置參數(shù)注入路由，從而讓整個(gè)應(yīng)用都有路由功能
const app = new Vue({
  router
}).$mount('#app')
// 現(xiàn)在浪慌，應(yīng)用已經(jīng)啟動(dòng)了冤荆！

通過注入路由器，我們可以在任何組件內(nèi)通過this.$router訪問路由器权纤，也可以通過this.$route訪問當(dāng)前路由：

// Home.vue
export default {
  computed: {
    username () {
      return this.$route.params.username
    }
  },
  methods: {
    goBack () {
      window.history.length > 1
        ? this.$router.go(-1)
        : this.$router.push('/')
    }
  }
}

當(dāng)<router-link>對(duì)應(yīng)的路由匹配成功钓简，將自動(dòng)設(shè)置class屬性值.router-link-active。

動(dòng)態(tài)路由匹配

我們經(jīng)常需要把某種模式匹配到的所有路由汹想，全都映射到同個(gè)組件外邓。例如，我們有一個(gè)User組件古掏，對(duì)于所有ID各不相同的用戶坐榆，都要使用這個(gè)組件來渲染。那么冗茸，我們可以在vue-router的路由路徑中使用動(dòng)態(tài)路徑參數(shù)來達(dá)到這個(gè)效果席镀。

const User = {
  template: '<div>User</div>'
}
const router = new VueRouter({
  routes: [
    // 動(dòng)態(tài)路徑參數(shù) 以冒號(hào)開頭
    { path: '/user/:id', component: User }
  ]
})

現(xiàn)在像/user/foo和/user/bar都將映射到相同的路由。
一個(gè)路徑參數(shù)使用冒號(hào) :標(biāo)記夏漱。當(dāng)匹配到一個(gè)路由時(shí)豪诲，參數(shù)值會(huì)被設(shè)置到this.$route.params，可以在每個(gè)組件內(nèi)使用挂绰。于是屎篱，我們可以更新User的模板，輸出當(dāng)前用戶的ID葵蒂。

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

你可以在一個(gè)路由中設(shè)置多段路徑參數(shù)交播，對(duì)應(yīng)的值都會(huì)設(shè)置到$route.params中。

響應(yīng)路由參數(shù)的變化

當(dāng)使用路由參數(shù)時(shí)践付，例如從/user/foo導(dǎo)航到/user/bar秦士，原來的組件實(shí)例會(huì)被復(fù)用。因?yàn)閮蓚€(gè)路由都渲染同個(gè)組件永高，比起銷毀再創(chuàng)建隧土，復(fù)用則顯得更加高效。不過命爬，這也意味著組件的生命周期鉤子不會(huì)再被調(diào)用曹傀。
復(fù)用組件時(shí)，想對(duì)路由參數(shù)的變化作出響應(yīng)的話饲宛，你可以簡(jiǎn)單地watch（監(jiān)測(cè)變化）$route對(duì)象皆愉。

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 對(duì)路由變化作出響應(yīng)...
    }
  }
}

或者使用beforeRouteUpdate守衛(wèi)。

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

捕獲所有路由或 404 Not found 路由

常規(guī)參數(shù)只會(huì)匹配被/分隔的URL片段中的字符艇抠。如果想匹配任意路徑幕庐，我們可以使用通配符(*)：

{
  // 會(huì)匹配所有路徑
  path: '*'
}
{
  // 會(huì)匹配以 `/user-` 開頭的任意路徑
  path: '/user-*'
}

當(dāng)使用通配符路由時(shí)，請(qǐng)確保路由的順序是正確的练链，也就是說含有通配符的路由應(yīng)該放在最后翔脱。路由{ path: '*' }通常用于客戶端404錯(cuò)誤。如果你使用了History模式媒鼓，請(qǐng)確保正確配置你的服務(wù)器届吁。

當(dāng)使用一個(gè)通配符時(shí)，$route.params內(nèi)會(huì)自動(dòng)添加一個(gè)名為pathMatch參數(shù)绿鸣。它包含了URL通過通配符被匹配的部分：

// 給出一個(gè)路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
// 給出一個(gè)路由 { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'

高級(jí)匹配模式

vue-router使用path-to-regexp作為路徑匹配引擎疚沐，所以支持很多高級(jí)的匹配模式，例如：可選的動(dòng)態(tài)路徑參數(shù)潮模、匹配零個(gè)或多個(gè)亮蛔、一個(gè)或多個(gè)，甚至是自定義正則匹配擎厢。

匹配優(yōu)先級(jí)

有時(shí)候究流，同一個(gè)路徑可以匹配多個(gè)路由辣吃，此時(shí)，匹配的優(yōu)先級(jí)就按照路由的定義順序：誰先定義的芬探，誰的優(yōu)先級(jí)就最高神得。

嵌套路由

實(shí)際生活中的應(yīng)用界面，通常由多層嵌套的組件組合而成偷仿。同樣地哩簿，URL中各段動(dòng)態(tài)路徑也按某種結(jié)構(gòu)對(duì)應(yīng)嵌套的各層組件。

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

<div id="app">
  <router-view></router-view>
</div>

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

這里的<router-view>是最頂層的出口酝静，渲染最高級(jí)路由匹配到的組件节榜。同樣地，一個(gè)被渲染組件同樣可以包含自己的嵌套<router-view>别智。例如宗苍，在User組件的模板添加一個(gè)<router-view>。

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}

要在嵌套的出口中渲染組件亿遂，需要在VueRouter的參數(shù)中使用children配置浓若。

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 當(dāng) /user/:id/profile匹配成功，
          // UserProfile會(huì)被渲染在User的<router-view>中
          path: 'profile',
          component: UserProfile
        },
        {
          // 當(dāng) /user/:id/posts匹配成功
          // UserPosts會(huì)被渲染在User的<router-view>中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

要注意蛇数，以/開頭的嵌套路徑會(huì)被當(dāng)作根路徑挪钓。 這讓你充分的使用嵌套組件而無須設(shè)置嵌套的路徑。
children配置就是像routes配置一樣的路由配置數(shù)組耳舅，所以可以嵌套多層路由碌上。
此時(shí)，基于上面的配置浦徊，當(dāng)你訪問/user/foo時(shí)馏予，User的出口是不會(huì)渲染任何東西，這是因?yàn)闆]有匹配到合適的子路由盔性。如果你想要渲染點(diǎn)什么霞丧，可以提供一個(gè)空的子路由。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id', component: User,
      children: [
        // 當(dāng) /user/:id 匹配成功冕香，
        // UserHome 會(huì)被渲染在 User 的 <router-view> 中
        { path: '', component: UserHome },
        // ...其他子路由
      ]
    }
  ]
})

編程式的導(dǎo)航

除了使用<router-link>創(chuàng)建a標(biāo)簽來定義導(dǎo)航鏈接蛹尝，我們還可以借助router的實(shí)例方法，通過編寫代碼來實(shí)現(xiàn)悉尾。

router.push(location,onComplete?,onAbort?)

在Vue實(shí)例內(nèi)部突那，可以通過$router訪問路由實(shí)例。因此你可以調(diào)用 this.$router.push构眯。
想要導(dǎo)航到不同的URL愕难，則使用router.push方法。這個(gè)方法會(huì)向history棧添加一個(gè)新的記錄，所以猫缭，當(dāng)用戶點(diǎn)擊瀏覽器后退按鈕時(shí)葱弟，則回到之前的URL。
當(dāng)你點(diǎn)擊<router-link>時(shí)饵骨，這個(gè)方法會(huì)在內(nèi)部調(diào)用翘悉，所以說，點(diǎn)擊<router-link :to="...">等同于調(diào)用router.push(...)居触。

該方法的參數(shù)可以是一個(gè)字符串路徑，或者一個(gè)描述地址的對(duì)象老赤。

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

注意：如果提供了path，params會(huì)被忽略抬旺，上述例子中的query并不屬于這種情況弊予。取而代之的是下面例子的做法，你需要提供路由的name或手寫完整的帶有參數(shù)的path开财。

const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 這里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

同樣的規(guī)則也適用于router-link組件的to屬性汉柒。
在2.2.0+，可選的在router.push或router.replace中提供onComplete和onAbort回調(diào)作為第二個(gè)和第三個(gè)參數(shù)责鳍。這些回調(diào)將會(huì)在導(dǎo)航成功完成 (在所有的異步鉤子被解析之后) 或終止 (導(dǎo)航到相同的路由碾褂、或在當(dāng)前導(dǎo)航完成之前導(dǎo)航到另一個(gè)不同的路由) 的時(shí)候進(jìn)行相應(yīng)的調(diào)用。
注意：如果目的地和當(dāng)前路由相同历葛，只有參數(shù)發(fā)生了改變 (比如從一個(gè)用戶資料到另一個(gè)/users/1->/users/2)正塌，你需要使用beforeRouteUpdate來響應(yīng)這個(gè)變化 (比如抓取用戶信息)。

router.replace(location,onComplete?,onAbort?)

跟router.push很像恤溶，唯一的不同就是乓诽，它不會(huì)向history添加新記錄，而是跟它的方法名一樣——替換掉當(dāng)前的history記錄咒程。

router.go(n)

這個(gè)方法的參數(shù)是一個(gè)整數(shù)鸠天，意思是在 history 記錄中向前或者后退多少步，類似 window.history.go(n)帐姻。

// 在瀏覽器記錄中前進(jìn)一步稠集，等同于history.forward()
router.go(1)
// 后退一步記錄，等同于history.back()
router.go(-1)
// 前進(jìn) 3 步記錄
router.go(3)
// 如果 history 記錄不夠用卖宠，那就默默地失敗唄
router.go(-100)
router.go(100)

操作History

你也許注到router.push巍杈、router.replace和router.go跟window.history.pushState、window.history.replaceState和window.history.go好像扛伍，實(shí)際上它們確實(shí)是效仿window.historyAPI的筷畦。
還有值得提及的，vue-router的導(dǎo)航方法（push、replace鳖宾、go）在各類路由模式（history吼砂、hash和abstract）下表現(xiàn)一致。

命名路由

有時(shí)候鼎文，通過一個(gè)名稱來標(biāo)識(shí)一個(gè)路由顯得更方便一些渔肩，特別是在鏈接一個(gè)路由，或者是執(zhí)行一些跳轉(zhuǎn)的時(shí)候拇惋≈苜耍可以在創(chuàng)建Router實(shí)例的時(shí)候，在routes配置中給某個(gè)路由設(shè)置名稱撑帖。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

要鏈接到一個(gè)命名路由蓉坎，可以給router-link的to屬性傳一個(gè)對(duì)象。

<router-link:to="{name:'user',params:{userId:123}}">User</router-link>

這跟代碼調(diào)用router.push()是一回事胡嘿。

router.push({ name:'user',params:{ userId:123 }})

這兩種方式都會(huì)把路由導(dǎo)航到/user/123路徑蛉艾。

命名視圖

有時(shí)候想同時(shí)（同級(jí)）展示多個(gè)視圖，而不是嵌套展示衷敌，例如創(chuàng)建一個(gè)布局勿侯，有sidebar和main兩個(gè)視圖，這個(gè)時(shí)候命名視圖就派上用場(chǎng)了缴罗。你可以在界面中擁有多個(gè)單獨(dú)命名的視圖助琐，而不是只有一個(gè)單獨(dú)的出口。如果router-view沒有設(shè)置名字瞒爬，那么默認(rèn)為default弓柱。

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

一個(gè)視圖使用一個(gè)組件渲染，因此對(duì)于同個(gè)路由侧但，多個(gè)視圖就需要多個(gè)組件矢空。確保正確使用components配置（帶上s）。

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

嵌套命名視圖

我們也有可能使用命名視圖創(chuàng)建嵌套視圖的復(fù)雜布局禀横。這時(shí)你也需要命名用到的嵌套router-view組件屁药。我們以一個(gè)設(shè)置面板為例：

/settings/emails                                       /settings/profile
+-----------------------------------+                  +------------------------------+
| UserSettings                      |                  | UserSettings                 |
| +-----+-------------------------+ |                  | +-----+--------------------+ |
| | Nav | UserEmailsSubscriptions | |  +------------>  | | Nav | UserProfile        | |
| |     +-------------------------+ |                  | |     +--------------------+ |
| |     |                         | |                  | |     | UserProfilePreview | |
| +-----+-------------------------+ |                  | +-----+--------------------+ |
+-----------------------------------+                  +------------------------------+

• Nav只是一個(gè)常規(guī)組件。
• UserSettings是一個(gè)視圖組件柏锄。
• UserEmailsSubscriptions酿箭、UserProfile、UserProfilePreview是嵌套的視圖組件趾娃。

UserSettings組件的<template>部分應(yīng)該是類似下面的這段代碼：

<!-- UserSettings.vue -->
<div>
  <h1>User Settings</h1>
  <NavBar/>
  <router-view/>
  <router-view name="helper"/>
</div>

然后你可以用這個(gè)路由配置完成該布局缭嫡。

{
  path: '/settings',
  // 你也可以在頂級(jí)路由就配置命名視圖
  component: UserSettings,
  children: [{
    path: 'emails',
    component: UserEmailsSubscriptions
  }, {
    path: 'profile',
    components: {
      default: UserProfile,
      helper: UserProfilePreview
    }
  }]
}

重定向和別名

重定向

重定向也是通過routes配置來完成，下面例子是從/a重定向到/b抬闷。

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

重定向的目標(biāo)也可以是一個(gè)命名的路由妇蛀。

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

甚至是一個(gè)方法耕突，動(dòng)態(tài)返回重定向目標(biāo)。

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目標(biāo)路由 作為參數(shù)
      // return 重定向的 字符串路徑/路徑對(duì)象
    }}
  ]
})

注意導(dǎo)航守衛(wèi)并沒有應(yīng)用在跳轉(zhuǎn)路由上评架，而僅僅應(yīng)用在其目標(biāo)上眷茁。在下面這個(gè)例子中，為/a路由添加一個(gè)beforeEach或beforeLeave守衛(wèi)并不會(huì)有任何效果纵诞。

別名

重定向的意思是上祈，當(dāng)用戶訪問/a時(shí)，URL將會(huì)被替換成/b浙芙，然后匹配路由為/b登刺，那么別名又是什么呢？/a的別名是/b茁裙，意味著塘砸，當(dāng)用戶訪問/b時(shí)，URL會(huì)保持為/b晤锥，但是路由匹配則為/a，就像用戶訪問`/a 一樣廊宪。

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

路由組件傳參

在組件中使用$route會(huì)使之與其對(duì)應(yīng)路由形成高度耦合矾瘾，從而使組件只能在某些特定的URL上使用，限制了其靈活性箭启。
使用props將組件和路由解耦：

取代與$route的耦合

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

通過props解耦

const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },
    // 對(duì)于包含命名視圖的路由壕翩，你必須分別為每個(gè)命名視圖添加 `props` 選項(xiàng)：
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

這樣你便可以在任何地方使用該組件，使得該組件更易于重用和測(cè)試傅寡。

布爾模式

如果props被設(shè)置為true放妈，route.params將會(huì)被設(shè)置為組件屬性。

對(duì)象模式

如果props是一個(gè)對(duì)象荐操，它會(huì)被按原樣設(shè)置為組件屬性芜抒。當(dāng)props是靜態(tài)的時(shí)候有用。

const router = new VueRouter({
  routes: [
    { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
  ]
})

函數(shù)模式

你可以創(chuàng)建一個(gè)函數(shù)返回props托启。這樣你便可以將參數(shù)轉(zhuǎn)換成另一種類型宅倒，將靜態(tài)值與基于路由的值結(jié)合等等。

const router = new VueRouter({
  routes: [
    { path:'/search',component:SearchUser,props:(route)=>({ query:route.query.q }) }
  ]
})

URL /search?q=vue會(huì)將{query: 'vue'}作為屬性傳遞給SearchUser組件屯耸。
請(qǐng)盡可能保持props函數(shù)為無狀態(tài)的拐迁，因?yàn)樗粫?huì)在路由發(fā)生變化時(shí)起作用。如果你需要狀態(tài)來定義props疗绣，請(qǐng)使用包裝組件线召，這樣Vue才可以對(duì)狀態(tài)變化做出反應(yīng)。

HTML5 History模式

vue-router默認(rèn)hash模式——使用URL的hash來模擬一個(gè)完整的URL多矮，于是當(dāng)URL改變時(shí)缓淹，頁面不會(huì)重新加載。
如果不想要hash，我們可以用路由的history模式割卖，這種模式充分利用history.pushState API來完成URL跳轉(zhuǎn)而無須重新加載頁面前酿。

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

當(dāng)你使用history模式時(shí)，URL就像正常的url鹏溯，例如http://yoursite.com/user/id罢维。
不過這種模式還需要后臺(tái)配置支持。因?yàn)槲覀兊膽?yīng)用是個(gè)單頁客戶端應(yīng)用丙挽，如果后臺(tái)沒有正確的配置肺孵，當(dāng)用戶在瀏覽器直接訪問http://oursite.com/user/id就會(huì)返回404，這就不好看了颜阐。
所以呢平窘，要在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源：如果URL匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個(gè)index.html頁面凳怨，這個(gè)頁面就是你app依賴的頁面瑰艘。
這么做以后，你的服務(wù)器就不再返回404錯(cuò)誤頁面肤舞，因?yàn)閷?duì)于所有路徑都會(huì)返回index.html文件紫新。為了避免這種情況，你應(yīng)該在Vue應(yīng)用里面覆蓋所有的路由情況李剖，然后在給出一個(gè)404頁面芒率。

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})