現在的很多應用都流行SPA應用（singe page application) 。傳統的專案大多使用多頁面結構，需要切換內容的時候我們往往會進行單個html檔案的跳轉，這個時候因受到網路、效能的影響，瀏覽器會出現不定時間的空白介面，使用者體驗不好。而單頁應用則是使用者透過某些操作更改位址列url之後，動態的進行不同模板內容的無重新整理切換，使用者體驗好。而在vue2.0版本後，vue官方推出vue-router外掛來實現單頁面的路由跳轉，內部原理就是透過元件之間的切換（元件的解除安裝與安裝）去實現整個頁面無重新整理的效果。
一．專案引入路由並配置：
1.在vue專案中，透過cnpm或者yarn的方式進行vue-router的安裝
cnpm i vue-router -S
yarn add vue-router -S
2.接下來需要在入口檔案main.js裡面進行路由的引入與註冊
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
3. 建立router路由器
new Router({
routes:[
{path:"",component:}
]
})
4. 建立路由表並配置在路由器中
var routes = [
//path為路徑，component為路徑對應的路由元件
{path,component}
]
new Router({
routes
})
5. 在根例項裡注入router,目的是為了讓所有的元件裡都能透過this.$router、this.$route來使用路由的相關功能api
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
6. 利用router-view來指定路由切換的位置
7. 使用router-link來建立切換的工具，會渲染成a標籤，新增to屬性來設定要更改的path資訊，且會根據當前路由的變化為a標籤新增對應的router-link-active/router-link-exact-active（完全匹配成功）類名
<router-link to="main">main</router-link>
<router-link to="news">news</router-link>
.router-link-active{
color:red;
}
專案中多級路由配置：
在建立路由表的時候，可以為每一個路由物件建立children屬性，值為陣列，在這個裡面又可以配置一些路由物件來使用多級路由，注意：只在一級路由的path前加 '/ '
const routes = [
{path:'/home,component:Home},
{path:'/list',component:List,children:[
{path:'inner',component:Inner},
{path:'outer',component:Outer}
]},
]
二級路由元件的切換位置依然由router-view來指定（指定在父級路由元件的模板中）
<router-link to='/home/inner'>inner</router-link>
<router-link to='/home/outer'>outer</router-link>
<router-view></router-view>
但是這樣發現當路由路徑多級的時候，不利於快速定位路由匹配的元件。所以，可以透過命名路由的方式去實現以上程式碼。
我們可以給路由物件配置name屬性，當我們在跳轉的時候直接寫name:inner就會快速的找到此name屬性所對應的路由，不需要寫大量的urlpath路徑了。如下所示：
{path:'inner',component:Inner,name:'inner'}
這樣的話，我們就可以方便的根據路由的不同進行元件之間的對映。但是，做大型專案開發的時候，我們也會發現很多的路由寫在routes這個裡面，會讓router這個檔案變得很大不利於維護管理。除此之外，如果透過這樣的方式還會導致當使用者開啟首頁的話，因為webpack打包的時候，載入內容異常的多導致開啟速度很慢。所以我們需要對我們的路由採取懶載入的方式進行引入：
const routes = [
homeRouter
]
//homeRouter.js檔案裡面
export defult {
Name:’homeRouter’,
Path:’/home’
component:() => import('./my-async-component')}
}
Vue-Router的路由守衛：
在專案開發中，我們經常會在路由跳轉前後做一些操作。例如我們可以透過利用vue-router裡面提供的路由守衛結合axios攔截器實現專案的登入攔截等操作。Vue-router裡面提供的路由守衛可以分為三大類，分別是全域性路由守衛、單個的路由鉤子的路由守衛、路由元件內部的路由守衛。好，我們依次來看：
透過 router.beforeEach 或者router.afterEach註冊一個全域性守衛：
1-1
router.beforeEach((to, from, next) => {
//會在任意路由跳轉前執行，next一定要記著執行，不然路由不能跳轉了
next()
})
守衛方法需要接受三個引數：to、from、next
to:即將要進入的目標物件
From:當前導航正要離開的路由
Next: 一定要呼叫該方法來 resolve 這個鉤子。執行效果依賴 next 方法的呼叫引數。
1-2
//會在任意路由跳轉後執行
Router.afterEach((to,from)=>{
})
單個路由鉤子守衛：
只有beforeEnter，在進入前執行，to引數就是當前路由
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// next也是必須要寫的
}
}
]
路由元件鉤子守衛：
beforeRouteEnter (to, from, next) {
//內部不能呼叫this 當這個路由呼叫時，元件沒有被初始化
},
beforeRouteUpdate (to, from, next) {
// 內部可以訪問元件例項 `this`
//路由內部動態引數改變了，元件被複用的時候呼叫（/list/1跳入/list/2,詳情元件複用的時候）
},
beforeRouteLeave (to, from, next) {
// 可以訪問元件例項 `this` 路由離開這個元件的時候進入
}
以上就是Vue-Router裡面的核心技術點，需要在專案中不斷的練習、具體到業務邏輯中使用才能更好的理解、滲透，其次多加記憶、鞏固才可更加清晰。