項(xiàng)目中用到了vue-router，那么就簡(jiǎn)單總結(jié)一下vue-router的使用。

1.vue-router安裝

npm install vue-router --save //也可以通過(guò)cnpm安裝

通過(guò)vue-cli搭建的框架可以看到在router文件夾中的index.js文件有如下：

import Router from 'vue-router'
Vue.use(Router); //如果使用全局的 script 標(biāo)簽，則無(wú)須如此（手動(dòng)安裝）。

2. 開始

當(dāng)把vue-router引入項(xiàng)目中，我們要弄清楚的有兩點(diǎn)。
第一，將組件映射到對(duì)應(yīng)的路由。
第二，組件在哪里渲染。
如下第一個(gè)例子：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 組件來(lái)導(dǎo)航. -->
    <!-- 通過(guò)傳入 `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>

如上，通過(guò)router-link組件進(jìn)行導(dǎo)航，其中的to屬性指定跳轉(zhuǎn)的路由，router-link會(huì)被渲染為一個(gè)a標(biāo)簽。

如果是模塊化編程，首先要導(dǎo)入vue和vue-router，然后Vue.use(vueRouter)。

import Vue from 'vue'
import Router from 'vue-router'

//這兩個(gè)是路由組件，通過(guò)import進(jìn)來(lái)
import Index from '@/components/index/Index';
import BlogPage from '@/components/blog/BlogPage';

Vue.use(Router);

export default new Router({
  routes: 
    [
      {path: '/index', name: 'IndexPage', component: Index},//可以看到每個(gè)路由對(duì)應(yīng)一個(gè)組件
      {path: '/blog', name: 'BlogPage', component: BlogPage}
    ]
})；

//以上創(chuàng)建了路由實(shí)例并且通過(guò)export暴露出來(lái)。然后創(chuàng)建和掛載根實(shí)例，這樣整個(gè)應(yīng)用都具有路由功能。
const app = new Vue({
  router
}).$mount('#app')

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

在某些情況下我們需要某種模式匹配的路由都映射到同一個(gè)組件。

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

如上的動(dòng)態(tài)路徑，可以匹配/user/1, /user/2, user/foo，等一系列這種模式的路由。
當(dāng)匹配到某一個(gè)路由的時(shí)候，會(huì)將這些參數(shù)存到this.$router.params中。如上匹配的路由參數(shù)，我們可以通過(guò)this.$router.params.id進(jìn)行獲取。

注意：使用路由參數(shù)時(shí)，如上面的從/user/1跳轉(zhuǎn)到/user/2，原來(lái)的組件是會(huì)被復(fù)用的，因?yàn)閮蓚€(gè)路由都映射的是同一個(gè)組件，這樣的設(shè)計(jì)是具有一定的高效性的。不過(guò)關(guān)于組件的生命周期的一些鉤子函數(shù)都無(wú)法使用了。
我們可以通過(guò)watch進(jìn)行檢測(cè)一些路由參數(shù)的變化。

4. 嵌套路由

當(dāng)一個(gè)被渲染的組件中可以包含自己的<router-view>。當(dāng)一個(gè)被渲染的組件要渲染自己的子組件，那么需要在路由配置中加上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)做根路徑, 所以如果在children中的子路由前面加上/就會(huì)在地址欄中顯示的是從跟路由顯示的路徑

5.編程式導(dǎo)航

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

• router.push(location)
  想要導(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)用，所以說(shuō)，點(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' }})

• router.replace(location)
  跟 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)

6.命名視圖

有時(shí)候想同時(shí)（同級(jí)）展示多個(gè)視圖，而不是嵌套展示，例如創(chuàng)建一個(gè)布局，有 sidebar（側(cè)導(dǎo)航） 和 main（主內(nèi)容） 兩個(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
      }
    }
  ]
})

7.重定向 和 別名

• 重定向
  重定向也是通過(guò) routes 配置來(lái)完成，下面例子是從 /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āng)用戶訪問(wèn) /a時(shí)，URL 將會(huì)被替換成 /b，然后匹配路由為 /b，那么『別名』又是什么呢？
  /a 的別名是 /b，意味著，當(dāng)用戶訪問(wèn) /b 時(shí)，URL 會(huì)保持為 /b，但是路由匹配則為 /a，就像用戶訪問(wèn) /a 一樣。
  上面對(duì)應(yīng)的路由配置為：

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

關(guān)于vue-router簡(jiǎn)單的使用就介紹到此了，詳細(xì)的教程可以去看：
https://router.vuejs.org/zh-cn/essentials/getting-started.html