# 1.什麼是路由 ## 1.1路由簡介 說起路由你想起了什麼？路由是一個網路工程裡面的術語。 > 路由（routing）就是通過互聯的網路把資訊從源地址傳輸到目的地址的活動。 --- 維基百科 額，啥玩意? 沒聽懂。在生活中，我們有沒有聽說過路由的概念呢? 當然了，路由器嘛。路由器是做什麼的? 你有想過嗎?路由器提供了兩種機制: 路由和轉送。路由是決定資料包從來源到目的地的路徑。轉送將輸入端的資料轉移到合適的輸出端。路由中有一個非常重要的概念叫路由表。路由表本質上就是一個對映表，決定了資料包的指向。 ## 1.2後端路由階段 早期的網站開發整個HTML頁面是由伺服器來渲染的。伺服器直接生產渲染好對應的HTML頁面，返回給客戶端進行展示。但是，一個網站這麼多頁面伺服器如何處理呢? 一個頁面有自己對應的網址，也就是URL。URL會發送到伺服器，伺服器會通過正則對該URL進行匹配，並且最後交給一個Controller進行處理。Controller進行各種處理，最終生成HTML或者資料，返回給前端。這就完成了一個IO操作。 上面的這種操作，就是後端路由。當我們頁面中需要請求不同的路徑內容時，交給伺服器來進行處理，伺服器渲染好整個頁面，並且將頁面返回給客戶頓。這種情況下渲染好的頁面，不需要單獨載入任何的js和css，可以直接交給瀏覽器展示，這樣也有利於SEO的優化。 **後端路由的缺點:** 一種情況是整個頁面的模組由後端人員來編寫和維護的。另一種情況是前端開發人員如果要開發頁面，需要通過PHP和Java等語言來編寫頁面程式碼。而且通常情況下HTML程式碼和資料以及對應的邏輯會混在一起，編寫和維護都是非常糟糕的事情。 ## 1.3前端路由階段 **前後端分離階段：** 隨著Ajax的出現, 有了前後端分離的開發模式。後端只提供API來返回資料, 前端通過Ajax獲取資料, 並且可以通過JavaScript將資料渲染到頁面中。這樣做最大的優點就是前後端責任的清晰, 後端專注於資料上, 前端專注於互動和視覺化上。並且當移動端(iOS/Android)出現後, 後端不需要進行任何處理, 依然使用之前的一套API即可。目前很多的網站依然採用這種模式開發。 **單頁面富應用階段:** 其實SPA最主要的特點就是在前後端分離的基礎上加了一層前端路由。也就是前端來維護一套路由規則。 **前端路由的核心是什麼呢？** 改變URL，但是頁面不進行整體的重新整理。如何實現呢？ # 2.前端路由的規則 ## 2.1URL的hash URL的hash，URL的hash也就是錨點(#)， 本質上是改變window.location的href屬性。我們可以通過直接賦值location.hash來改變href，但是頁面不發生重新整理  ## 2.2HTML5的history模式：pushState history介面是HTML5新增的, 它有五種模式改變URL而不重新整理頁面。history.pushState()  ## 2.3HTML5的history模式：replaceState  ## 2.4HTML5的history模式：go  # 3.vue-router基礎 ## 3.1認識vue-router 目前前端流行的三大框架, 都有自己的路由實現: Angular的ngRouter React的ReactRouter Vue的vue-router 當然, 我們的重點是vue-router vue-router是Vue.js官方的路由外掛，它和vue.js是深度整合的，適合用於構建單頁面應用。 我們可以訪問其官方網站對其進行學習: https://router.vuejs.org/zh/ vue-router是基於路由和元件的路由用於設定訪問路徑，將路徑和元件對映起來。在vue-router的單頁面應用中, 頁面的路徑的改變就是元件的切換。 ## 3.2安裝和使用vue-router 因為我們已經學習了webpack, 後續開發中我們主要是通過工程化的方式進行開發的。所以在後續, 我們直接使用npm來安裝路由即可。 **步驟一:** 安裝vue-router npm install vue-router --save **步驟二:** 在模組化工程中使用它(因為是一個外掛, 所以可以通過Vue。use()來安裝路由功能) * 第一步：匯入路由物件，並且呼叫 Vue。use(VueRouter) * 第二步：建立路由例項，並且傳入路由對映配置 * 第三步：在Vue例項中掛載建立的路由例項 **使用vue-router的步驟:** * 第一步: 建立路由元件 * 第二步: 配置路由對映: 元件和路徑對映關係 * 第三步: 使用路由: 通過和 ## 3.3Vue案例 ### 1.建立router例項 在用cli3建立vue專案時，我們需要選擇router然後才可以使用，如果建立專案時沒有選擇router，那麼在使用時就需要自己進行安裝  ```js import Vue from 'vue' import VueRouter from 'vue-router' //1 注入外掛 Vue.use(VueRouter) //2 定義路由 const routes = [ ] //3 建立router例項 const router = new VueRouter({ routes }) //4 匯出router例項 export default router ``` ### 2.掛載到vue例項中 在main.js中引入router  ```js import Vue from 'vue' import App from './App.vue' //匯入router import router from './router' Vue.config.productionTip = false new Vue({ router, //掛載 render: h => h(App) }).$mount('#app') ``` ### 3.建立路由元件 在views目錄下建立about.vue和home.vue兩個元件 `about.vue` ```html ``` `home.vue` ```html ``` ### 4.配置元件和路徑的對映關係 剛才我們已經的index.js中建立了router例項，但是我們並沒有配置路由間的對映關係，現在我們配置對映關係 ```js import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/home.vue' import About from '../views/about.vue' //1 注入外掛 Vue.use(VueRouter) //2 定義路由 const routes = [ //新增對映關係 { //預設首頁 path: '/', redirect: '/home' }, { path: '/home', component: Home }, { path: '/about', component: About } ] //3 建立router例項 const router = new VueRouter({ routes }) // 4 匯出router例項 export default router ``` ### 5.使用路由 在App.vue中使用路由 ```html ``` ``: 該標籤是一個vue-router中已經內建的元件, 它會被渲染成一個``標籤。 ``: 該標籤會根據當前的路徑, 動態渲染出不同的元件。網頁的其他內容, 比如頂部的標題/導航, 或者底部的一些版權資訊等會和``處於同一個等級。在路由切換時, 切換的是``掛載的元件, 其他內容不會發生改變。 最終效果  # 4.路由細節處理 ## 4.1路由的預設路徑 我們這裡還有一個不太好的實現：預設情況下, 進入網站的首頁, 我們希望``渲染首頁的內容。但是我們的實現中, 預設沒有顯示首頁元件, 必須讓使用者點選才可以。如何可以讓路徑預設跳到到首頁, 並且``渲染首頁元件呢？非常簡單, 我們只需要多配置一個對映就可以了。 ```js //預設首頁 path: '/', redirect: '/home' // 配置解析:我們在routes中又配置了一個對映。 // path配置的是根路徑: /，redirect是重定向, 也就是我們將根路徑重定向到/home的路徑下, 這樣就可以得到我們想要的結果了。 ``` ## 4.2HTML5的History模式 我們前面說過改變路徑的方式有兩種：URL的hash，HTML5的history預設情況下, 路徑的改變使用的URL的hash。如果希望使用HTML5的history模式, 非常簡單, 進行如下配置即可 ```js const router = new VueRouter({ mode: 'history', //history模式 routes }) ``` ## 4.3router-link補充 在前面的``中, 我們只是使用了一個屬性: to, 用於指定跳轉的路徑。 ``還有一些其他屬性: * tag: tag可以指定``之後渲染成什麼元件, 比如上面的程式碼會被渲染成一個`

`元素, 而不是`` * replace: replace不會留下history記錄, 所以指定replace的情況下, 後退鍵返回不能返回到上一個頁面中 * active-class: 當``對應的路由匹配成功時, 會自動給當前元素設定一個router-link-active的class, 設定active-class可以修改預設的名稱。在進行高亮顯示的導航選單或者底部tabbar時, 會使用到該類。但是通常不會修改類的屬性, 會直接使用預設的router-link-active即可。 ## 4.4修改linkActiveClass 該class具體的名稱也可以通過router例項的屬性進行修改 ```js const router = new VueRouter({ mode: 'history', routes, linkActiveClass: 'active' //修改類名稱 }) ``` ## 4.5路由的程式碼跳轉 有時候我們需要在路由跳轉的同時執行一些操作，那麼通過``不是很好實現，這時我們就需要通過JavaScript程式碼進行路由跳轉，將App.vue中程式碼修改如下： ```html ``` ## 4.6動態路由 在某些情況下，一個頁面的path路徑可能是不確定的，比如我們進入使用者介面時，希望是如下的路徑：/user/aaaa或/user/bbbb，除了有前面的/user之外，後面還跟上了使用者的ID，這種path和Component的匹配關係，我們稱之為動態路由(也是路由傳遞資料的一種方式)。  # 5.路由巢狀 巢狀路由是一個很常見的功能，比如在home頁面中, 我們希望通過/home/news和/home/message訪問一些內容。一個路徑對映一個元件, 訪問這兩個路徑也會分別渲染兩個元件。  下面我們來做一個路由巢狀的案例 首先定義兩個元件： `message.vue` ```html ``` `news.vue` ```html ``` 接著在router/index.js下面加上路由對映 ```js import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/home.vue' import About from '../views/about.vue' import User from '../views/user.vue' // 加入message.vue import Message from '../views/message.vue' import News from '../views/news.vue' //1 注入外掛 Vue.use(VueRouter) //2 定義路由 const routes = [ //新增對映關係 { //預設首頁 path: '/', redirect: '/home' }, { path: '/home', component: Home, // 路由巢狀 children: [ { path: '/', component: Message }, { path: 'message', component: Message }, { path: 'news', component: News } ] }, { path: '/about', component: About }, { path: '/user/:id', component: User } ] //3 建立router例項 const router = new VueRouter({ mode: 'history', routes, linkActiveClass: 'active' //修改類名稱 }) // 4 匯出router例項 export default router ``` # 6.傳遞引數 在進行路由跳轉時，我們有時想要攜帶一些引數，那麼路由的引數該如何來傳遞呢？下面我們一起來學習一下 ## 6.1傳遞引數的方式 傳遞引數主要有兩種型別: params和query **params的型別:** 配置路由格式: /router/:id，傳遞的方式: 在path後面跟上對應的值，傳遞後形成的路徑: /router/123, /router/abc **query的型別:** 配置路由格式: /router, 也就是普通配置，傳遞的方式: 物件中使用query的key作為傳遞方式，傳遞後形成的路徑: /router?id=123, /router?id=abc 如何使用它們呢? 也有兩種方式: 的方式和JavaScript程式碼方式 **傳遞引數方式一: ** ```html ``` **傳遞引數方式二: JavaScript程式碼** ```js 檔案 linktoProfile() { this.$router.push({ path: '/profile/' + abc, query: { name: 'wugongzi', age: 18 } }) } ``` ## 6.2獲取引數 獲取引數通過$route物件獲取的。在使用了 vue-router 的應用中，路由物件會被注入每個元件中，賦值為 this.$route ，並且當路由切換時，路由物件會被更新。通過$route獲取傳遞的資訊如下:  $route和$router是有區別的 * $router為VueRouter例項，想要導航到不同URL，則使用$router.push方法 * $route為當前router跳轉物件裡面可以獲取name、path、query、params等 ![image-20200731095648469](https://cdn.jsdelivr.net/gh/wugongzi-git/BlogFigurebed/image/202007310956