Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度整合，讓構建單頁面應用變得易如反掌。包含的功能有：
- 巢狀的路由/檢視表
- 模組化的、基於元件的路由配置
- 路由引數、查詢、萬用字元
- 基於 Vue.js 過渡系統的檢視過渡效果
- 細粒度的導航控制
- 帶有自動啟用的 CSS class 的連結
- HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
- 自定義的滾動條行為
上面是vue-router官方的介紹，接下來我總結一下，自己平時用的vue-router的相關知識，適合入門級別的小白白們，高手請繞（饒）過
在使用vue-router之前，我們首先要把他整合到vue腳手架中，
（注意：本文的講解基礎是已經預設你安裝好了vue-cli那一套東西）
vue-router 安裝
npm install vue-router --save
在 src/router/index.js檔案下寫入以下程式碼
import Vue from 'vue'
import VueRouter from 'vue-router'
//在vue中註冊VueRouter
Vue.use(VueRouter);
//匯入路由對映的元件
//普通匯入方式
import comA from '@components/comA'
//需要懶載入的匯入方式（所謂懶載入就是說，一開始不會載入所有的資源導致等待時間太長，而是當你切換導航的時候，相關元件裡面的資源會陸續載入）
const comB = resolve=>require(['@components/comB'],resolve);
//然後寫出路由對映關係
const routes = [
{
path:'/',
name:'home',
component:home,
},
{
path:'/about',
name:'about',
component:about,
children:[
{
path:'aboutA' //其實相當於 path:'/about/aboutA'
},{
path:'aboutB',
}
]
}
]
複製程式碼這就是比較簡單和比較全的結構了，除去（引數和鉤子，後面講）。 寫完對映關係，然後建立router例項，並且吧對映關係傳進去
const router = new VueRouter({
routes
})
//需要注意的是，全域性路由鉤子就是要寫在router例項上的，如下
router.beforeEach((to, from, next)=>{
...
next();
})
複製程式碼接下來，我們來看看vue-router的模式
vue-router預設使用的是hash模式，就是在路由跳轉的時候，會有很多 #，看起來不太美觀，因此我們可以使用 history模式 ，這種模式充分利用了 history.pushStateAPI來完成URL跳轉而無需重新載入頁面，從而提高了使用者體驗。但是，當你直接訪問 www.root.com/home/page1的時候，瀏覽器就會真的去請求該地址，如果後端沒有相關的配置，那麼就會返回404，就很尷尬了，所以一定要和後端配合好。
模式基本的樣子就是下面的樣子
const router = new VueRouter({
mode:"history",
routes
})
複製程式碼路由傳參
一般路由有兩種傳參方式，分為 params 和 query，先看看params吧,就用官網的例子吧
const User = {
template: '<div>{{$route.params.id}}</div>'
}
const router = new VueRouter({
routes: [
// 動態路徑引數 以冒號開頭
{ path: '/user/:id', component: User }
]
})
複製程式碼在元件內使用$route會使 元件與之高度耦合，從而元件只能在特定的URL上使用，他的靈活性受到了限制，因此可以使用props使他們解耦，
const User = {
props:['id'],
template:`<div>{{id}}</div>`
}
const router = new VueRouter({
routes:[
{
path:'/user/:id',
component:User,
props:true
},
//對於包含命名檢視的路由，你必須分別為每一個命名路由新增 props 選項，如下
{
path:'/user/:id',
components:{default:User,sidebar:SideBar},
props:{default:true,sidebar:false}
}
]
})
複製程式碼這樣一來就極大的增加了元件的靈活性，更加易於重用和測試
params 和 query
query是這樣用的
//傳參
this.$router.push({
name:'home',
query:{
id:id
}
})
//接受引數
this.route.query.id
複製程式碼params和query十分相似，
//傳參
this.$router.push({
name:'home',
params:{
id:id
}
})
//接受引數
this.route.params.id
複製程式碼這裡有一點是需要注意的，那就是使用 params的時候，是不可以使用path的，因為params本身就是path動態路徑的構成元素，這樣會發生矛盾。
為了保持一致性，query 和 params傳參的時候，都儘量 使用nama來進行區分。
引數的位置 一般情況下
this.$router.push和router-link裡面的to的引數型別是一模一樣的。如下
<router-link to:"/home"></router-link>
//相當於
this.$router.push("/home");
{
name:"home",
path:'/home/:id',
componet:Home
}
<router-link to:"{name:"home",params:{id:"lala"}}"
//相當於
this.$router.push({
name:"home",
params:{
id:"lala"
}
})
複製程式碼以上就是 to 和this.$router.push引數一直的說明，接下來 我們就 系統的看一下，路由鉤子;
路由鉤子
全域性路由鉤子
beforeEach and afterEach
const router = new VueRouter({
...
})
//需要注意的是，全域性路由鉤子，是路由例項上的，也就是上面的那個 router上的，不要弄混哦
router.beforeEach((to, from, next)=>{
// to 將要到達的路由物件
// from 目標路由物件
// next()進行下一步
// next(false) 中斷當前的跳轉，一般用於 提醒使用者是否確認進入某頁面，使用者取消
//next('/') 或者 next({name:"home",params:{}})
})
router.afterEach((to,from)=>{
...
//導航已經結束，因此沒有next
})
複製程式碼路由對映關係上的 鉤子
beforeEnter and afterEnter
const router = new VueRouter({
routes:[
{ name:home,
path:'/home',
component:Home,
beforeEnter:(to,from, next) =>{
...
},
afterEnter:(to, from)=>{
...
}
}
]
})
複製程式碼基本上和全域性路由鉤子的用法一樣
元件內的鉤子
beforeRouterEnter and beforeRouterUpdate(2.2 add) and beforeRouterLeave
export default{
data(){
return {
...
}
},
beforeRouterEnter (to, from, next){
//由於在使用這之前，導航還未確認，例項還沒有被建立，所以這裡面是不能呼叫this的
},
beforeRouterUpdate(to,from,next){
//次函式的觸發規則是，在類似 /home/:id 這樣的動態路由中，由於id的變化，但是元件仍然不變的情況下，便可以使用
//此時例項已經建立完成，因此，this可以登上舞臺
},
beforeRouterLeave(to,from,next){
//導航離開元件對應路由會觸發這個函式
//可以訪問this
}
}
複製程式碼這就是我對vue路由的，一些理解和總結，希望能夠幫助剛剛入門的小夥伴們，一起加油，堅持寫文章，未來一片光明