路由是網路工程裡面的專業術語，就是通過互聯把資訊從源地址傳輸到目的地址的活動。本質上就是一種對應關係。分為前端路由和後端路由。
後端路由：
URL 的請求地址與伺服器上的資源對應，根據不同的請求地址返回不同的資源。
前端路由：
在單頁面應用中，根據使用者觸發的事件，改變URL在不重新整理頁面的前提下，改變顯示內容。
1、前端路由實現原理
URL 的 hash 模式
改變 hash 值的時候，#是一個位置識別符號，可以進行頁面內的位置跳轉，並不會重新整理頁面。
通過 location.hash 改變頁面的 hash 值，如：
我們發現頁面並不會重新整理。
URL 的 history 模式
history 模式，有 5 種改變 url 而不重新整理頁面的方法，分別為：
history.pushState() //壓入棧
history.replaceState() // 替換當前url，不能返回上一個頁面
history.back() //返回上一個頁面
history.go(n) //n的值可以是大於0的，表示向前幾個，小於0時，表示向後退幾個
history.forward() //向前一步history.go(-1) 等價於 history.back()
history.go(1) 等價於 history.forward()
前端三大框架，都有自己的路由：
Angular 有 ngRouter
React 有 ReactRouter
Vue 有 vue-Router
2、vue-Router 基本使用
2.1、安裝
npm install vue-router --save
使用 vue-router 的前提是 vue 必須使用
在 router 資料夾內 index.js 引入vue-router
import Vue from 'vue'
import VueRouter from 'vue-router' Vue.use(VueRouter) //引用 vue-router 外掛
2.2、配置路由
//配置路由與元件之間的關係
const route=[
{
path: '/',
// 當訪問 '/'的時候 路由重定向 到新的地址 '/home'
redirect: '/home',
},
{
path: '/home',
component: home,
},
{
path: '/login',
component: login,
},
]
2.3、例項化
const router = new VueRouter({
mode: "history", //設定模式
routes
});
2.4、掛載路由
到 main.js 中，vue 例項化中，把 router 掛載的 vue 上。
let app = new Vue({
el:'#app',
data:{},
// 掛載到vue上面
router,
})
2.5、頁面上新增 router-link 和 router-view
<!-- 新增路由 -->
<router-link to="/home">首頁</router-link>
<router-link to="/about">關於</router-link> <!-- 展示路由內容 -->
<router-view />
router-link 預設會被渲染成 a 標籤，如：
<router-link to="/home">首頁</router-link>
// 渲染成
<a href="#/home">首頁</a>
router-view 是用來佔位的，將路由對應的元件展示到該位置。
3、router 的模式
路由模式有兩種，hash 和 history 模式。
3.1、hash 模式
vue-router 預設使用的是 hash 模式。
hash 的 url 中錨點就是 #xx 號後的內容，通過錨點作為路由地址，我們通常改變的是#號後的內容，實現瀏覽器渲染指定的元件，錨點發生改變會觸發 onhashchange 事件。
3.2、history 模式
history就是正常的 url，沒有#號，使用的時候需要伺服器進行配置。history模式下，對應的方法與上述 5 個方法是一樣的。
vue-router 中可以指定需要的模式：
const router = new VueRouter({
mode:'history'
})
4、router-link的屬性
router-link 預設會渲染成 a 標籤，但是有時候你想渲染成別的標籤也是可以的。
4.1、tag 屬性
tag屬性是用來設定 router-link 標籤渲染型別的，如我們想把 router-link 渲染成 button，如：
<router-link to="/home" tag="button">首頁</router-link>
檢視渲染後的元素，發現變成 button 標籤了，對應的 to 新增的屬性值就會失效。此時點選無法跳轉到對應內容，可繼續閱讀下邊跳轉方式。
除了 button ，tag 的屬性值還可以是其他任意標籤，router-link 自動渲染成對應的標籤。
4.2、replace 屬性
replace與上邊 history 模式中的 replaceState 對應，跳轉的時候不會留下 history 記錄，指定replace 的情況下，不能返回上一頁。
<router-link to="/home" replace>首頁</router-link>
4.3、active-class
active-class 設定 router-link 點選當前選中的類名，預設情況下類名為：router-link-active
<a href="#/"
aria-current="page"
class="router-link-exact-active router-link-active">
首頁
</a>
設定當前元素樣式需要設定到：router-link-active。
設定 active-class ，如：
<router-link to="/" active-class="active">首頁</router-link>
// router-link-active 類名會被替換成 active
如果需要把全域性的 router-link 的選擇類名都修改成自定義的，一個一個單獨設定工作量太大，可以在 router 中統一設定。
const router=new VueRouter({
routes,
mode: 'hash',
linkActiveClasss: 'active' //統一設定類名
})
5、vue-Rrouter 頁面跳轉方式
5.1、router-link 實現
// 簡單寫法
<router-link to="/">首頁</router-link> //使用動態的path
<router-link :to="{ path : '/' }"></router-link>
可以使用path 也可以使用name //帶傳參跳轉1
<router-link :to="
{ name:'home', params:{ id:'123' , name:'gq' }}
">
</router-link> //帶傳參跳轉
<router-link :to="
{ path:'/', query:{ id:'123' , name:'gq' }}
">
</router-link>
5.2、通過 js 實現跳轉
// 簡單寫法
this.$router.push({ path:'/' })
// push 與history.pushState 一樣 //帶參跳轉
this.$router.push({
name: 'home' , params: { id:'123' , name:'gq' }
}) //帶多種引數
this.$router.push({
name: 'home' ,
params: { id:'123' , name:'gq' },
query: { plan:'private' }
})
6、動態路由
在某些情況下，一個頁面的 path 路徑可能是不確定的，如：希望的路徑為 /user/123或 /user/456 。後邊的值為使用者 id 或其他值。
配置路由
routers:[
{
path: '/user/:id',
component:()=>{ import('../views/user.vue') }
}
]
新增路由
<router-link to="/user/123"> user:123 </router-link>
<router-link to="/user/456"> user:456 </router-link> //動態設定後邊id值
<router-link :to=" '/user/'+id "> user:{{ id }} </router-link>
獲取後邊動態值
this.$route.params.id
此處的 id 是配置路由處設定的 id ，只要保持一致就可以了方式二：使用 query 進行傳參
<router-link to="/user?id=123"></router-link>
//取值時
this.$route.query.id另外，this.$router.addRoutes([]) 也可以新增動態路由，裡面傳的是一個數組，與 routes 配置一樣。
7、路由的懶載入
懶載入通俗的講就是使用的時候再載入，不使用的時候不載入。
打包構建應用程式的時候，js包會變得很大，影響載入速度，如果我們能把不同路由對應的元件分割成不同的程式碼塊，然後訪問路由的時候才載入對應的元件，這樣就更加高效了。
路由懶載入到底做了什麼呢？主要作用就是將路由對應的元件打包成一個js程式碼塊，只有路由訪問的時候，才載入對應的 js 。
//直接引用的
import Home from './component/home'
const routes = [
{
path:'/home',
component:Home
}
] //懶載入
const routes = [
{
path:'/home',
component:()=>{ import('./component/home') }
}
]
8、巢狀路由
實際應用中，通常由多層巢狀的元件組合而成。
實現步驟：
第一：建立對應的子元件，並且在路由對映中配置對應的子路由。
第二：元件內部使用 router-view 標籤
{
path: "/body",
component: ()=> import( "../components/bodyLayout.vue"),,
children:[
{
path: "manager",
component: ()=> import( "../components/blankView.vue"),
children:[
{
path: "user",
component: ()=> import( "../views/manager/user.vue")
},
]
},
]
}
訪問 user 元件時，路由為：/body/manager/user
注意：巢狀路由設定 path 時，不能新增 “/”，否則路由就變了。
{
path: "/user",
component: ()=> import( "../views/manager/user.vue")
}
//此時訪問路由就變成了 " /user "
9、router 與 route 區別
試著在main.js 列印 router 在任意元件內列印 this.$router，列印結果如圖：
我們發現兩個結果是一模一樣的。這樣我們就不難理解下面的意思了。
router 為 VueRouter 例項，擁有自己的方法，如：使用 new VueRouter建立的例項，想要導航到不同url，可以使用 router.push ，跳轉方式中有介紹。
route 為當前活躍狀態路由物件，有當前路由的資訊，可以通過該物件，獲取 path、params引數、query引數、name、matched、hash
10、路由守衛
為什麼使用導航守衛？我們來考慮一個需求：在 SPA應用中，網頁標題跟著頁面切換如何變動？
// 在對應的元件內新增
created(){
document.title="測試"
}
訪問該元件時，標題自動切換為 ”測試“
如果使用上述方法，那麼對應已開發的元件有多少個，我們就得新增多少次，實在是太麻煩了，所以我們要藉助路由守衛，統一修改，也便於維護。
10.1、全域性守衛
1>、使用 router.beforeEach 註冊一個全域性前置守衛，只要路由變動時，都會經過它。beforeEach 接收的引數是一個函式，包含的引數有三個。
router.beforeEach((to,from,next)=>{
// 路由從 from 跳轉到 to
// 我們只需要在路由上增加一個 name屬性就可以了
document.title = from.name
next()
})
注意：上述三個引數順序不能改變。next 不能丟，必須新增，否則頁面跳轉的時候沒法到下一步，卡在空白區域。
2>、使用 router.afterEach 註冊一個全域性後置守衛。
router.afterEach((to,from)=>{
console.log('後置守衛')
})
這兩個守衛都是全域性守衛，afterEach 是在路由跳轉完成才執行的，所以不需要 next 。引數只有兩個。
10.2、路由獨享守衛
路由配置上直接定義的守衛，用法與全域性守衛一致，只是將其放在其中一個路由物件中，只有這個路由下起作用。
{
path: "/test",
name: "測試",
component: ()=> import( "../views/manager/test.vue"),
beforeEnter:(to,from,next)=>{
console.log('test進入前')
next()
}
}
這些守衛與全域性前置守衛的方法引數是一樣的。
10.3、元件內守衛
可以在路由元件內直接定義路由導航守衛，定義在元件內的就是元件內守衛。
const Foo = {
template: `...`,
beforeRouteEnter(to, from, next) {
// 在渲染該元件的對應路由被 confirm 前呼叫
// 不！能！獲取元件例項 `this`
// 因為當守衛執行前，元件例項還沒被建立
},
beforeRouteUpdate(to, from, next) {
// 在當前路由改變，但是該元件被複用時呼叫
// 舉例來說，對於一個帶有動態引數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
// 由於會渲染同樣的 Foo 元件，因此元件例項會被複用。而這個鉤子就會在這個情況下被呼叫。
// 可以訪問元件例項 `this`
},
beforeRouteLeave(to, from, next) {
// 導航離開該元件的對應路由時呼叫
// 可以訪問元件例項 `this`
}
}
注意：beforeRouteLeave 離開路由時執行，必須新增 next，否則無法正常跳轉到下一個路由。
11、keep-alive
切換路由的時候頁面每次都會重新渲染，我們有的元件會存在一些資料需要保留，不希望來回切換時每次都重新渲染，所以就使用 keep-alive 包裹元件，這樣只有第一次執行載入時會執行 created mounted 等鉤子函式。
keep-alive 是 Vue 內建的一個元件，可以使被包含的元件保留狀態，或避免重新渲染。
<div id="app">
<router-link to="/home">home</router-link>
<router-link to="/login">login</router-link>
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
新增 keep-alive 元件，切換的時候，元件只會在第一次的時候渲染元件，之後進入不會重新渲染。
11.1、keep-alive 特定方法
activated(){
console.log('activated')
},
deactivated(){
console.log("deactivated")
}
這兩個函式，只有元件被保持了狀態，使用keep-alive時，才是有效會執行的。
keep-alive生命週期執行順序：
created -> mounted -> activated
deactivated 在退出後才會觸發
11.2、keep-alive 屬性
keep-alive 有兩個非常重要的屬性：
include - 字串或正則表示式，只有匹配元件的時候才會被快取
exclude - 字串或正則表示式，任何匹配的元件都不會被快取
<keep-alive include="test">
<router-view></router-view>
</keep-alive> //test元件 新增name屬性
<template>
<div>
test
</div>
</template>
<script>
export default {
name:'test'
}
<script>
此時只有 test 元件會被快取，其他任意元件都不會快取。
如果還有其他元件同時需要被快取，include可新增多個值，只用逗號隔開，但不能新增空格。
<keep-alive include="test,user">
<router-view></router-view>
</keep-alive>
exclude的使用：
<keep-alive exclude="test,user">
<router-view></router-view>
</keep-alive>
正好與上例項相反，只有 test,user 兩個元件不被快取，其他的被快取。