使用Vue.js開發SPA（Single Page Application）單頁面應用。
vue-router可以通過html5的history API或者hash實現單頁應用，即不刷新跳轉，切換地址，只是頁面上的組件的切換；
vue-router可以實現頁面間傳參等其他功能；

基本用法

當你要把 vue-router 添加進來，我們需要做的是，將組件(components)映射到路由(routes)，然後告訴 vue-router 在哪裏渲染它們。

首先我們需要定義鏈接url，而vue-router使用<router-link>對a標簽進行包裝。
HTML:

<div id="app">
    <div>
        <!-- 通過router-link來導航，to屬性指定鏈接， 默認 會渲染成a標簽 -->
        <router-link to="/home">Home</router-link>
        <router-link to="/user">User</router-link>
    </div>
    <div>
        <!-- 路由出口，路由匹配到的組件將在這裏渲染 -->
        <router-view></router-view>
    </div>
</div>
 

Javascript:

//1.定義(路由)組件
    var home = {template:‘<p>This is Home Page。。。</p>‘}
    var user = {template:‘<p>This is User Page</p>‘}
    //2.定義路由，這是一組路由，每個路由使用一個大括號
    const routes = [
        {path:‘/home‘,component:home},
        {path:‘/user‘,component:user}
    ];
    //3.創建路由實例,然後傳入路由配置
    var router= new VueRouter({
       routes   //縮寫，相當於routes:routes
    });
    //4.在Vue實例中註入路由
    var vm = new Vue({
        el:‘#app‘,
        router   //縮寫,相當於router:router
    });
 

運行一下，可以完美的跑起來。

router-link類樣式

我們看一下控制臺Elements，發現確實變成了<a>標簽,並且還為當前選定的<router-link>添加了class “router-link-exact-active”和“router-link-active”，我們可以為其添加類樣式。

還可以重新設置它的名稱只需要在router路由實例中配置。

linkActiveClass:‘active‘//或其他值

HTML5 History模式

我們看路徑，默認會給前面加上#號，可能會看起來很醜,我們可以使用HTML5 History模式。這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新加載頁面

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

而如果你這樣做的話，後臺服務器需要配置，因為我們的應用是個單頁客戶端應用，如果後臺沒有正確的配置，可能就會出現404頁面。那麽就需要一個通配符的方法解決,你可以使用重定向。
3.重定向
1.通過路徑方式

const routes=[
    ....
    //若為/,表示默認重定向/home路徑，*則表示匹配任何則重定向到
    {path:‘/‘,redirect:‘/home‘}//或者{path:‘*‘,redirect:‘/home‘}
]

當匹配找不到的時候，就會轉到這個路由。
2.通過路由名稱
當然還可以通過路由名稱的方式重定向,前提是你為路由設置了name參數

const routes = [
    {path:‘/user‘,component:user,name:‘user‘},//此時通過name設置路由名稱
    {path:‘/‘,redirect:{name:‘user‘}}//此處通過name屬性給與路由名稱
];

嵌套路由

嵌套路由無非是在路由裏再加路由，與組件一樣。
假如user中需要login和regist

//重新為user定義模板
<template id="user">
    <div>
        <ul>
            <li><router-link to="/user/login">User Login</router-link></li>
            <li><router-link to="/user/regist">User Regist</router-link></li>
        </ul>
        <router-view></router-view>
    </div>
</template>
//為user路由添加子路由
children:[
    {path:‘login‘,component:login},
    {path:‘regist‘,component:regist}
}
//定義組件
var login = {template:‘<p>用戶登錄</p>‘}
var regist = {template:‘<p>用戶註冊</p>‘}

運行一下，可以正常顯示。
註意user模板中的router-link和router-view，他倆是一一對應的，跟外面的不一樣。

router-link標簽渲染

前面說過，router-link的默認渲染為<a>標簽，我們可以更改,通過tag屬性

<router-link to="/user/login" tag="li">User Login</router-link>
<router-link to="/user/regist" tag="li">User Regist</router-link>

動態路由匹配

如果我們通過路徑路徑來匹配到某個路由。例如，我們有一個 User 組件，對於所有 ID 各不相同的用戶，都要使用這個組件來渲染。那麽，我們可以在 vue-router 的路由路徑中使用『動態路徑參數』。
通俗地講就是參數嘛，

• 字符串參數 ?uname=xiao&pwd=123
• rest風格傳參 /yao/456

當然我們這樣映射路由的話，肯定是要參數值的，字符串的獲得參數和rest獲得參數使用了不同的方法

• 字符串參數 $route.query
• rest風格參數 $route.params

//字符串參數的方式無需配置映射路徑,直接顯示
var login = {template:‘<p>用戶登錄,獲取參數,{{$route.query}}</p>‘}

//rest方式
children:[
    {path:‘login‘,component:login},
    {path:‘regist/:uname/:pwd‘,component:regist}
]
var regist = {template:‘<p>用戶註冊,獲取參數,{{$route.params}}</p>‘}

主要說一下第二種動態路徑參數，它類似REST ful,匹配的路徑都能夠映射,一個『路徑參數』使用冒號 : 標記 ,當匹配到一個路由時，參數值會被設置到 this.$route.params，可以在每個組件內使用。

響應路由參數的變化

當使用路由參數時，例如從 /user/login 導航到 /user/regist，原來的組件實例會被復用。因為兩個路由都渲染同個組件，比起銷毀再創建，復用則顯得更加高效。不過，這也意味著組件的生命周期鉤子不會再被調用

復用組件時，想對路由參數的變化作出響應的話，你可以簡單地 watch（監測變化） $route 對象

watch: {
    ‘$route‘ (to, from) {
      // 對路由變化作出響應...
    }
  }

匹配優先級

有時候，同一個路徑可以匹配多個路由，此時，匹配的優先級就按照路由的定義順序：誰先定義的，誰的優先級就最高。

編程式導航

router.push向當前添加一個路由並使用

除了使用 <router-link> 創建 a 標簽來定義導航鏈接，我們還可以借助 router 的實例方法，通過編寫代碼來實現。

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

註意:在 Vue 實例內部，你可以通過 $router 訪問路由實例。因此你可以調用 this.$router.push

這個方法會向 history 棧添加一個新的記錄，所以，當用戶點擊瀏覽器後退按鈕時，則回到之前的 URL。

當你點擊 <router-link> 時，這個方法會在內部調用，所以說，點擊 <router-link :to="..."> 等同於調用 router.push(...)。

//this.$router.push("home");//字符串，值為路由名稱
//this.$router.push({path:‘/user‘});//對象，path指定路徑
//this.$router.push({name:‘regist‘,params:{uname:‘chen‘,pwd:123}});//動態參數路由
//this.$router.push({path:‘/user/login‘,query:{uname:‘chen‘,pwd:123}});//帶查詢參數
以及
router.push({ name: ‘user‘, params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123

註意：如果提供了 path，params 會被忽略
你還需註意，你使用的方式是query還是params，如果你的path使用的是：標註方式的，則使用params，否則使用query

router.replace替換掉當前記錄

跟 router.push 很像，唯一的不同就是，它不會向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當前的 history 記錄。

其語法結構與router.push方法完全一樣，只不過重要的是，不會生成一條歷史記錄。

router.go(n)前進或後退

這個方法的參數是一個整數，意思是在 history 記錄中向前或者後退多少步，類似 window.history.go(n)。

// 在瀏覽器記錄中前進一步，等同於 history.forward()
router.go(1)

// 後退一步記錄，等同於 history.back()
router.go(-1)

// 前進 3 步記錄
router.go(3)

// 如果 history 記錄不夠用，那就默默地失敗唄
router.go(-100)
router.go(100)

Vue2.0筆記——vue-router路由