1.引入vue-router

npm install vue-router --save

2.設(shè)置路由
（1）路由實(shí)例常見屬性設(shè)置：

export default new Router({
    mode:"hash" | "history" | "abstract"       //路由模式,默認(rèn)值"hash"  
    base:string   //應(yīng)用的基路徑,默認(rèn)值"/"  
    linkActiveClass:string   //激活 class 類名,默認(rèn)值"router-link-active"  
    linkExactActiveClass:string   //精確激活的默認(rèn)的 class,默認(rèn)值"router-link-exact-active"  
    scrollBehavior:Function   //滾動(dòng)行為  
    parseQuery / stringifyQuery:Function  //提供自定義查詢字符串的解析/反解析函數(shù)  
    fallback:boolean   //當(dāng)瀏覽器不支持 history.pushState 控制路由是否應(yīng)該回退到 hash 模式  
    routes:[]        //構(gòu)建路由
}）

（2）routes:[]構(gòu)建路由

routes:[{
    path:string,     //定義路徑
    component:Component,   //聲明組件
    name:string,        //命名路由
    components:{default:component,name:component},  //命名多組件
    redirect:string|location|fun，    //路由重定位
    props?: boolean | Object | Function; //將組件和路由解耦
    alias:string|Array，     //別名
    childer:{},              //路由嵌套
    beforeEnter:(to: Route, from: Route, next: Function) => void,
    meta:any,     //元數(shù)據(jù)。在meta對(duì)象中可以設(shè)置一些狀態(tài)，來進(jìn)行一些操作；
    //2.6.0+版本新增
    caseSensitive:bloolean,    //匹配大小寫敏感，默認(rèn)flase
    pathToRegexpOptions:object          //編譯正則選項(xiàng)

}]

3.頁面應(yīng)用
<router-link></router-link>：路由導(dǎo)航，默認(rèn)渲染成<a>標(biāo)簽

<router-link to="/home" replace tat="li" active-class="active" ></router-link>
<router-link :to="{ name:'router1',params: { id: status}}" ></router-link>
<router-view></router-view>   //渲染路徑匹配到的視圖組件  

to:string | Location #目標(biāo)路由的鏈接
replace:boolean # 是否留下 history 記錄，默認(rèn)值false
append:boolean # 是否為相對(duì)路徑，默認(rèn)值false
tag:string # 渲染指定標(biāo)簽，默認(rèn)值<a>標(biāo)簽
active-class:string # 鏈接激活樣式，默認(rèn)值"router-link-active"
exact:boolean # 是否精準(zhǔn)匹配，默認(rèn)值false
event:string | Array<string> # 觸發(fā)導(dǎo)航的事件，默認(rèn)值'click'
exact-active-class: string # 精準(zhǔn)匹配激活樣式，默認(rèn)值'router-link-exact-active'

4.$router全局路由對(duì)象
實(shí)例屬性
router.app: Vue instance #Vue 根實(shí)例
router.mode: string #路由使用的模式
router.currentRoute: Route #當(dāng)前路由對(duì)應(yīng)的路由信息對(duì)象

動(dòng)態(tài)的導(dǎo)航到一個(gè)新 URL
router.push(location, onComplete?, onAbort?)
router.replace(location, onComplete?, onAbort?)
router.go(n) //n=0為刷新，n>0為前進(jìn)，n<0為后退
router.back() //后退
router.forward() //向前；

增加全局的導(dǎo)航守衛(wèi)
router.beforeEach((to, from, next) => { /* must call next / })
router.beforeResolve((to, from, next) => { / must call next */ })
router.afterEach((to, from) => {})

router.getMatchedComponents(location?) //返回目標(biāo)位置或是當(dāng)前路由匹配的組件數(shù)組
router.resolve(location, current?, append?) //解析目標(biāo)位置
router.addRoutes(routes: Array<RouteConfig>) //動(dòng)態(tài)添加更多的路由規(guī)則
router.onReady(callback, [errorCallback]) // 回調(diào)函數(shù)，路由完成初始導(dǎo)航時(shí)調(diào)用
router.onError(callback) //回調(diào)函數(shù)，路由導(dǎo)航過程中出錯(cuò)時(shí)被調(diào)用

5.$route實(shí)例化路由對(duì)象
路由對(duì)象屬性
$route.path: string //當(dāng)前路由的路徑，總是解析為絕對(duì)路徑
$route.params: Object //包含了動(dòng)態(tài)片段和全匹配片段
$route.query: Object //表示 URL 查詢參數(shù)
$route.hash: string //當(dāng)前路由的 hash 值
$route.fullPath: string //完成解析后的 URL
$route.matched: Array<RouteRecord> //當(dāng)前路由的所有嵌套路徑片段的路由記錄
$route.name //當(dāng)前路由的名稱
$route.redirectedFrom //重定向來源的路由的名字