Vue Router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度整合，讓構建單頁面應用變得易如反掌。包含的功能有：

巢狀的路由/視圖表
模組化的、基於元件的路由配置
路由引數、查詢、萬用字元
基於 Vue.js 過渡系統的檢視過渡效果
細粒度的導航控制
帶有自動啟用的 CSS class 的連結
HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
自定義的滾動條行為

安裝

直接下載/CDN

在 Vue 後面載入 vue-router，它會自動安裝的：

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

通過npm安裝

npm install vue-router

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

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

Vue.use(VueRouter)

 注意：Vue專案在初始化的時候不要整合vue-router

構建開發版

如果你想使用最新的開發版，就得從 GitHub 上直接 clone，然後自己 build 一個 vue-router。

git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build
 

使用

1.安裝並引入和明確使用

npm install vue-router

import VueRouter from 'vue-router'

Vue.use(VueRouter)

2.建立/定義路由

const router = new VueRouter({
    routes:[
      {
        path:"/",
        name:"HelloWorld",
        component:HelloWorld
      }
    ]
  })
 

3.給出路由顯示的位置

 <router-view />

比如：

<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 元件來導航. -->
    <!-- 通過傳入 `to` 屬性指定連結. -->
    <!-- <router-link> 預設會被渲染成一個 `<a>` 標籤 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的元件將渲染在這裡 -->
  <router-view></router-view>
</div>

4.將路由物件注入Vue例項

// 建立 router 例項，然後傳 `routes` 配置
// 你還可以傳別的配置引數, 不過先這麼簡單著吧。
const router = new VueRouter({
  routes // (縮寫) 相當於 routes: routes
})

//  建立和掛載根例項。
// 記得要通過 router 配置引數注入路由，
// 從而讓整個應用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

6.路由跳轉

<p>
    <!-- 使用 router-link 元件來導航. -->
    <!-- 通過傳入 `to` 屬性指定連結. -->
    <!-- <router-link> 預設會被渲染成一個 `<a>` 標籤 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>

完整演示

線上例項演示：

https://jsfiddle.net/yyx990803/xgrjzsup/

vue-router例項程式碼：

https://github.com/vuejs/vue-router/tree/dev/examples