前言

本篇隨筆主要寫了Vue框架中路由的基本概念、路由對象屬性、vue-router插件的基本使用效果展示。案例分析、原理圖解、附源碼地址獲取。

作為自己對Vue路由進行頁面跳轉效果知識的總結與筆記。

因內容有案例解讀，代碼實現，導致篇幅稍長，大約3分鐘可以瀏覽完，如有需要的話（請筆友耐心看完，也可按目錄查找所需內容）

如需要全部案例代碼-自取：（百度網盤鏈接，全套案例源碼）

鏈接：https://pan.baidu.com/s/1EHOCU2qfDSx1BgI-SueFEg?pwd=1234 
提取碼：1234

本篇隨筆目錄：

PS: 點擊模版後的 -->  這個標誌可以瀏覽目錄結構，以便快速定位需要的內容

一、初識路由

1。什麼是後端路由

提到路由，一般會想到生活中常見的路由器，路由器主要用於連接多個邏輯上分開的網路，邏輯網路代表一個單獨的網路或者一個子網，可以通過路由器功能來完成不同網路之間數據的傳遞。在Vue中也引入了路由的概念，因此，我們先來對程式開發中的路由進行簡單地瞭解。

程式開發中的路由分為後端路由和前端路由。後端路由通過用戶請求的URL分發到具體的處理程式，瀏覽器每次跳轉到不同的URL，都會重新訪問伺服器。伺服器收到請求後，將數據和模板組合，返回HTML頁面，或者直接返回HTML模板，由前端JavaScript程式再去請求數據，使用前端模板和數據進行組合，生成最終的HTML頁面。
後端路由的工作原理如下圖所示。

上圖中，網站的伺服器地址是http://localhost，在這個網站中提供了3個頁面，分別為“首頁”“關於”和“我的資料”。當用戶在瀏覽器中輸入URL地址http://localhost/person來訪問“我的資料”頁面時，伺服器就會收到這個請求，找到相對應的處理程式，這就是路由的分發，這一功能是通過路由來實現的。

註意：瀏覽器每訪問一次新頁面的時候，都要向伺服器發送請求，然後伺服器會響應請求，返回新頁面給瀏覽器，在這個過程中會有一定的網路延遲。

2。什麼是前端路由

前端路由就是把不同路由對應不同的內容或頁面的任務交給前端來做。對於單頁面應用（SPA）來說，主要通過URL中的hash（#號）來實現不同頁面之間的切換。hash有一個特點，就是HTTP請求中不會包含hash相關的內容，所以單頁面程式中的頁面跳轉主要用hash來實現。
前端路由的工作原理如下圖所示。

上圖中，index.html後面的“#/home”是hash方式的路由，由前端路由來處理，將hash值與頁面中的組件對應，當hash值為“#/home”時，就顯示“首頁”組件。
前端路由在訪問一個新頁面的時候僅僅是變換了一下hash值而已，沒有和服務端交互，所以不存在網路延遲，提升了用戶體驗。

二、vue-router

1。vue-router工作原理

單頁面應用（SPA）的核心思想之一，就是更新視圖而不重新請求頁面，簡單來說，它在載入頁面時，不會載入整個頁面，只會更新某個指定的容器中的內容。對於大多數單頁面應用，都推薦使用官方支持的vue-router。
在實現單頁面前端路由時，提供了兩種方式，分別是hash模式和history模式，根據mode參數來決定採用哪一種方式。

1.1 hash模式

vue-router預設為hash模式，使用URL的hash來模擬一個完整的URL，當URL改變時，頁面不會重新載入。#就是hash符號，中文名為哈希符或者錨點，在hash符號後的值，稱為hash值。
路由的hash模式是利用了window可以監聽onhashchange事件來實現的，也就是說hash值是用來指導瀏覽器動作的，對伺服器沒有影響，HTTP請求中也不會包括hash值，同時每一次改變hash值，都會在瀏覽器的訪問歷史中增加一個記錄，使用“後退”按鈕，就可以回到上一個位置。所以，hash模式是根據hash值來發生改變，根據不同的值，渲染指定DOM位置的不同數據。

1.2 history模式

history模式不會出現#號比較美觀，這種模式充分利用history.pushState()來完成URL的跳轉而且無須重新載入頁面。使用history模式時，需要在路由規則配置中增加mode:'history'，示例代碼如下。

1 1 // main.js文件
2 2 const router = new VueRouter({
3 3   mode: 'history',
4 4   routes: [...]
5 5 })

註意：HTML5中history有兩個新增的API，分別是history.pushState() 和 history.replaceState()，它們都接收3個參數，即狀態對象（state object）、標題（title）和地址（URL）。

2。vue-router基本使用

vue-router可以實現當用戶單擊頁面中的A按鈕時，頁面顯示內容A；單擊B按鈕時，頁面顯示內容B。換言之，用戶單擊的按鈕和頁面顯示的內容，兩者是映射的關係。
學習vue-router的基本使用前，首先瞭解路由中3個基本的概念：route、routes、router。

• route ：表示它是一條路由，單數形式
• routes：表示它是一組路由，把route的每一條路由組合起來，形成一個數組
• router：表示它是一個機制，充當管理路由的管理者角色

案例展示

1.1下載並引入vue.js和vue-router.js文件

 首先從官方網站獲取vue.js和vue-router.js文件，保存到文件目錄中。其次創建html文件，併在文件中引入這兩個文件，示例代碼如下。

1 <script src="vue.js"></script>
2 <script src="vue-router.js"></script>

註意：在引入vue-router.js之前，必須先引入vue.js，因為vue-router需要在全局Vue的實例上掛載vue-router相關的屬性。

1.2編寫HTML結構代碼

1 <div id="app">
2   <router-link to="/login" tag="span">前往登錄</router-link>

3   <router-view></router-view>
4 </div>

1.3編寫JavaScript邏輯代碼

 1 var login = { // 創建組件
 2   template: '<h1>登錄組件</h1>'
 3 }
 4 var routerObj = new VueRouter({[ // 配置路由匹配規則
 5   routes: {path: '/login', component: login} ]
 6 })
 7 var vm = new Vue({
 8   el: '#app',
 9   router: routerObj // 將路由規則對象註冊到vm實例上
10 })

1.4瀏覽器運行查看

 在瀏覽器中打開文件，會看到頁面中只有“前往登錄”這4個字，單擊“前往登錄”，就會在下方出現“登錄組件”，效果如下圖所示。

註意：在創建的routerObj對象中，如果不配置mode，就會使用預設的hash模式，該模式下會將路徑格式化為#開頭。添加mode:'history'之後，將使用HTML5 history模式，該模式下沒有#首碼。component的屬性值，必須是一個組件的模板對象，不能是組件的引用名稱。

3。路由對象屬性

 路由對象（route object）表示當前激活的路由的狀態信息，包含了當前URL解析得到的信息，還有URL匹配到的路由記錄。路由對象是不可變的，每次成功地導航後都會產生一個新的對象。
this.$router表示全局路由器對象，項目中通過router路由參數註入路由之後，在任何一個頁面都可以通過此屬性獲取到路由器對象，並調用其push()、go()等方法。this.$route表示當前正在用於跳轉的路由對象，可以訪問其name、path、query、params等屬性。

1.1 路由對象$route的常用屬性信息如下表。

三、動態路由

1。什麼是動態路由

 上面講到的路由，都是嚴格匹配的，只有router-link中的to屬性和JavaScript中定義的路由中的path一樣時，才會顯示對應的component。但在實際開發時，這種方式是明顯不足的，例如，在不同角色登錄網站時，在去配置路由的時候，需要把用戶id作為參數傳入，這就需要利用動態路由來實現。在vue-router的路由路徑中，可以使用動態路徑參數給路徑的動態部分匹配不同的id。
在vue-router的路由路徑中，可以使用動態路徑參數給路徑的動態部分匹配不同的id，示例代碼如下。

1 { path: "/user/:id", component: user }
2 :id表示用戶id，動態值

註意：動態路由在來回切換時，由於它們都是指向同一組件，Vue不會銷毀再重新創建這個組件，而是復用這個組件。

如果想要在組件來回切換時進行一些操作，那就需要在組件內部利用watch來監聽$route的變化，示例代碼如下。

1 watch: {
2   $route (to, from) {
3     console.log(to)        // to表示要去的那個組件
4     console.log(from)    // from表示從哪個組件過來的
5   }
6 }

2。query方式傳參

 在理解了動態路由的概念後，接下來我們結合案例學習如何使用query方式傳遞參數。通過query方式傳遞參數，使用path屬性給定對應的跳轉路徑（類似於GET請求），在頁面跳轉的時候，可以在地址欄看到請求參數。

1.1編寫HTML結構代碼

1 <div id="app">
2   <router-link to="/user?id=10&name=admin">登錄</router-link>
3   <router-view></router-view>
4 </div>

1.2編寫JavaScript邏輯代碼

 1 var user = {  // 定義user組件
 2   template: '<h3>id: {{this.$route.query.id}} ' + 
 3    'name: {{$route.query.name}}</h3>',
 4   created () {                   // 組件的生命周期鉤子函數
 5     console.log(this.$route)    // 用this.$route來接收參數
 6   }
 7 }
 8 var router = new VueRouter({
 9   routes: [ { path: '/user', component: user }]
10 })
11 var vm = new Vue({ el: '#app', router })

1.3單擊“登錄”鏈接，效果圖如下

3。params方式傳參

結合案例講解如何使用params方式傳遞參數。使用params方式則不需要通過查詢字元串傳參，通常會搭配路由的history模式，將參數放在路徑中或隱藏。
在路由中開啟history模式後，params方式的URL地址會更加簡潔，但此功能必須搭配伺服器使用，並且要在伺服器中添加history模式的支持（在5.3節中已經講過），否則會出現找不到文件的錯誤。

1.1編寫HTML結構代碼

1 <div id="app">
2   <router-link to="/user/10/admin">登錄</router-link>
3   <router-view></router-view>
4 </div>

1.2編寫JavaScript邏輯代碼

 1 var user = { // 定義user組件
 2   template: '<h3>id: {{$route.params.id}} ' + 
 3    'name: {{$route.params.name}}</h3>',
 4   created () {        // 組件的生命周期鉤子函數
 5     console.log(this.$route)    // 用this.$route來接收參數
 6   }
 7 }
 8 var router = new VueRouter({
 9   routes: [{ path: '/user/:id/:name', component: user } ]
10 })
11 var vm = new Vue({ el: '#app', router })

1.3單擊“登錄”鏈接，效果圖如下

四、嵌套路由

1。什麼是嵌套路由

 是否是嵌套路由主要是由頁面結構來決定的，實際項目中的應用界面，通常由多層嵌套的組件組合而成。簡而言之，嵌套路由就是在路由裡面嵌套它的子路由。
嵌套子路由的關鍵屬性是children，children也是一組路由，相當於前面講到的routes，children可以像routes一樣的去配置路由數組。每一個子路由裡面可以嵌套多個組件，子組件又有路由導航和路由容器。

1 <router-link to="/父路由的地址/要去的子路由"></router-link>

當使用children屬性實現子路由時，子路由的path屬性前不要帶“/”，否則會永遠以根路徑開始請求，這樣不方便用戶去理解URL地址，示例代碼如下。

1 var router = new VueRouter({
2   routes: [{
3       path: '/home',
4       component: home,
5       children: [ // 子路由
6         { path: 'login', component: login },
7         { path: 'register', component: register }] 
8   }]
9 })

2。嵌套路由案例

 通過一個案例來理解路由嵌套的應用。案例完成後的效果圖如下。

1.1案列分析

在上圖中，頁面打開後會自動重定向到about組件，即“關於公司”頁面，在該頁面下有兩個子頁面，分別是“公司簡介”和“公司治理”。單擊“公司簡介”鏈接，URL跳轉到about/detail組件，效果如圖（1）所示。單擊“公司治理”鏈接，URL跳轉到about/governance組件，效果如圖（2）所示。

1.2代碼實現

 創建html文件，編寫HTML代碼，使用<router-link>標簽增加兩個導航鏈接。

1 <div id="app">
2   <ul>
3     <router-link to="/about" tag="li">關於公司</router-link>
4     <router-link to="/contact" tag="li">聯繫我們</router-link>
5   </ul>
6   <router-view></router-view> // 給子模板提供插入位置
7 </div>

1.3在app根容器外定義子組件模板，具體代碼如下。

 1 <template id="about-tmp">
 2   <div class="about-detail">
 3      … // 省略代碼
 4   </div>
 5 </template>
 6 <template id="contact-tmp">
 7   <div class="about-detail">
 8      … // 省略代碼
 9   </div>
10 </template>

1.4創建組件模板對象，具體代碼如下。

 1 <script>
 2   // 組件的模板對象
 3   var about = { template: '#about-tmp' }
 4   var contact = { template: '#contact-tmp' }
 5   // 子路由的組件模板對象
 6   var detail = { template: '<p>xx是全球領先... ...</p>'}
 7   var governance = {
 8     template: '<p>公司堅持以客戶為中心、以奮鬥者為本... ...</p>'
 9   }
10 </script>

1.5 創建路由對象router，配置路由匹配規則，具體代碼如下。

 1 var router = new VueRouter({
 2   routes: [
 3     { path: '/', redirect: '/about' }, // 路由重定向
 4     { path: '/about',component: about,
 5       children: [
 6         { path: 'detail', component: detail },
 7         { path: 'governance', component: governance}
 8       ] },
 9     { path: '/contact', component: contact }
10   ] })

1.6 掛載路由實例，具體代碼如下。

1 var vm = new Vue({
2   el: '#app',
3   router  // 掛載路由
4 })

1.7在<style>標簽內編寫樣式代碼，具體代碼如下。

1 ul, li, h1 { padding: 0; margin: 0; list-style: none }
2 #app { width: 100%; display: flex; flex-direction: row; }
3 ul { width: 200px; flex-direction:column; color:#fff; }
4 li { flex: 1; background: #000; margin:5px auto; 
5       text-align: center; line-height: 30px; }
6 .about-detail { flex:1; margin-left: 30px; }
7 .about-detail h1{ font-size: 24px; color: blue; }

1.8案例完成後的最終效果圖如下。

五、命名路由

1。什麼是命名路由

 vue-router提供了一種隱式的引用路徑，即命名路由，可以在創建Router實例的時候，在 routes 中給某個路由設置名稱name值。通過一個名稱來標識一個路由顯得更方便一些，特別是在鏈接一個路由，或者是執行一些跳轉的時候，通過路由的名稱取代路徑地址直接使用。像這種命名路由的方式，無論path多長、多煩瑣，都能直接通過name來引用，十分方便。

2。命名路由案例

1.1編寫HTML結構代碼

1 <div id="app">
2   // 當使用對象作為路由的時候，to前面要加一個冒號，表示綁定
3   <router-link :to="{name:'user',params:{id:123}}">登錄</router-link>
4   <router-view></router-view>
5 </div>

1.2編寫JavaScript邏輯代碼

1 var user = { // 創建user組件
2   template: '<h3>我是user組件</h3>',
3   created () { console.log(this.$route) }
4 }
5 var router = new VueRouter({ // 創建路由對象
6   routes: [{ path: '/user/:id', name: 'user',component: user }]
7 })
8 var vm = new Vue({  el: '#app', router })

1.3單擊“登錄”時，會跳轉到指定的路由地址，效果圖如下

六、命名視圖

1。什麼是命名視圖

 在開發中，有時候想同時或同級展示多個視圖，而不是嵌套展示，則可以在頁面中定義多個單獨命名的視圖。使用<router-view>可以為視圖進行命名，它主要用來負責路由跳轉後組件的展示。在<router-view>上定義name屬性表示視圖的名字，然後就可以根據不同的name值展示不同的頁面，如left、main等。如果<router-view>沒有設置名字，那麼預設為default。

2。命名視圖案例

1.1編寫HTML結構代碼

1 <div id="app">
2   <router-view></router-view>
3   <div class="container">
4     <router-view name="left"></router-view>
5     <router-view name="main"></router-view>
6   </div>
7 </div>
8 //name值為left和main，表示渲染其對應的組件

1.2編寫JavaScript邏輯代碼

 1 var header = { template: '<h1 class="header">header頭部區域</h1>' }
 2 var sidebar = { template: '<h1 class="sidebar">sidebar側導航區域</h1>' }
 3 var mainBox = { template: '<h1 class="main">mainBox主體區域</h1>' }
 4 var router = new VueRouter({
 5   routes: [{
 6     path: '/',
 7     components: {'default': header,'left': sidebar,'main': mainBox}
 8   }]
 9 })
10 var vm = new Vue({ el: '#app', router })

1.3編寫CSS樣式代碼

1 html, body { margin: 0; padding: 0; }
2 h1 { margin: 0; padding: 0; font-size: 16px; }
3 .header { background-color: lightblue; height: 80px; }
4 .container { display: flex; height: 600px; }
5 .sidebar { background-color: lightgreen; flex: 2; }
6 .main { background-color: lightpink; flex: 8; 

1.4瀏覽器預覽效果如下圖

七、編程式導航

1。router.push()

 在前面的開發中，當進行頁面切換時，都是通過<router-link>來實現的，這種方式屬於聲明式導航。為了更方便地在項目中開發導航功能，Vue提供了編程式導航，也就是利用JavaScript代碼來實現地址的跳轉，通過router實例方法來實現。
使用router.push()方法可以導航到不同的URL地址。這個方法會向history棧添加一條新的記錄，當用戶單擊瀏覽器後退按鈕時，可以回到之前的URL。
在單擊<router-link>時，router.push()方法會在內部調用，也就是說，單擊“<route-link :to="...">”等同於調用router.push(...)方法。

1.1router.push()方法的參數可以是一個字元串路徑，或者是一個描述路徑的對象。

 1 // 先獲取router實例
 2 var router = new VueRouter()
 3 // 字元串形式
 4 router.push('user')
 5 // 對象形式
 6 router.push({ path: '/login?url=' + this.$route.path })
 7 // 命名路由
 8 router.push({ name: 'user', params: { userId: 123 }})
 9 // 帶查詢參數 /user?id=1
10 router.push({ path: 'user', query: { id: '1' }})

1.2在參數對象中，如果提供了path，params會被忽略，為了傳參數，需要提供路由的name或者手寫帶有參數的path。

1 const userId = '123'
2 router.push({ name: 'user', params: { userId }})  // /user/123
3 router.push({ path: `/user/${userId}` })                // /user/123
4 // 這裡的 params 不生效
5 router.push({ path: '/user', params: { userId }})  // /user

1.3query傳參

1 <div id="app">
2   <button @click="goStart">跳轉</button>
3   <router-view></router-view>
4 </div>

1.4js代碼

 1 var user = { // 定義user組件
 2  // 使用this.$route.query.name接收參數name
 3   template: '<p>用戶名：{{ this.$route.query.name }}</p>'
 4 } 
 5 var router = new VueRouter({ 
 6   routes: [ { path: '/user', component: user }]
 7  })
 8 var vm = new Vue({  })
 9 var vm = new Vue({
10   el: '#app',
11   methods: {
12     goStart () {
13       this.$router.push({ path: '/user', query: { name: 'admin' } })
14     }
15   },
16   router
17 })

1.5單擊“跳轉”按鈕，瀏覽器預覽效果如下圖。

2。router.replace()

1.1router.replace()方法和router.push()方法類似，區別在於，為<router-link>設置replace屬性後，當單擊時，就會調用router.replace()，導航後不會向history棧添加新的記錄，而是替換當前的history記錄。

1 // 編程式
2 router.replace({ path: 'user' })
3 // 聲明式
4 <router-link :to="{path:'user'}" replace></router-link>

3。router.go()

1.1router.go()方法的參數是一個整數，表示在history歷史記錄中向前或者後退多少步，類似於window.history.go()。this.$router.go(-1)相當於history.back()，表示後退一步，this.$router.go(1)相當於history.forward()，表示前進一步，功能類似於瀏覽器上的後退和前進按鈕，相應的地址欄也會發生改變。

 1 <div id="app"><button @click="goBack">後退</button></div>
 2 // js代碼
 3 var router = new VueRouter()
 4 var vm = new Vue({
 5   el: '#app',
 6   methods: {
 7     goBack () {
 8       this.$router.go(-1) // 使用this.$router.go()進行後退操作
 9     }
10   },
11   router
12 })

總結：

1. 主要講解了Vue框架中路由的基本概念、路由對象屬性、vue-router插件的基本使用
2. 通過案例的形式講解瞭如何使用query和params方式傳遞參數、動態路由及路由嵌套的使用、命名視圖及命名路由的方法
3. 最後講到了使用vue-router的路由實例方法實現編程式導航的參數傳遞及獲取

通過以上的學習，各位筆友應該能夠使用Vue框架中的路由完成一些簡單的頁面跳轉和地址切換。

碼字不易，認為樓主寫的還不錯，對你有幫助的話，請給個三連（關註、點贊、收藏）另外有問題可評論區留言討論。

後期會完善Vue進階語法的相關知識，有幫助的話，敬請關註樓主 持續更新中ing 。。。（不定時發文）

轉載時請註明出處鏈接

百度雲盤案列全套源碼獲取鏈接（地址如下）：

鏈接：https://pan.baidu.com/s/1EHOCU2qfDSx1BgI-SueFEg?pwd=1234 
提取碼：1234

參考文檔：

 1.vue官方文檔：Vue.js (vuejs.org)

 2.傳智播客-黑馬程式員（教材）：http://stu.ityxb.com/

其他隨筆推薦：

1. 十大排序演算法（Java實現）（作者力推）：https://www.cnblogs.com/zbcxy506/p/zbcxy506_3arithmetic-01.html

2. Vue開發環境的部署：https://www.cnblogs.com/zbcxy506/p/zbcxy506_1vue-01.html

3. Vue基礎入門一：https://www.cnblogs.com/zbcxy506/p/zbcxy506_1vue-02.html

4. Vue基礎入門二：https://www.cnblogs.com/zbcxy506/p/note_1vue-03.html

5. Vue基礎知識思維導圖：https://www.cnblogs.com/zbcxy506/p/note_1vue-04.html

6.Vue動畫和過渡效果：https://www.cnblogs.com/zbcxy506/p/note_1vue-05.html

本文來自博客園，作者：智博程式園，轉載請註明原文鏈接，謝謝配合：https://www.cnblogs.com/zbcxy506/p/note_1vue-06.html