Vue2.x學習筆記。原視頻教程：最全最新Vue、Vuejs教程，從入門到精通_嗶哩嗶哩 (゜-゜)つロ 干杯~-bilibili

Vue-router

0. 認識路由

什么是路由？

路由是一個網絡工程里面的術語。

路由（routing）就是通過互聯的網絡把信息從源地址傳輸到目的地址的活動。— 維基百科

現實生活中的路由器提供了兩種機制: 路由和轉送。

• 路由是決定數據包從來源到目的地的路徑。

• 轉送將輸入端的數據轉移到合適的輸出端。

路由中有一個非常重要的概念叫路由表。

• 路由表本質上就是一個映射表, 決定了數據包的指向。

后端路由階段

早期的網站開發整個HTML頁面是由服務器來渲染的：服務器直接生產渲染好對應的HTML頁面, 返回給客戶端進行展示。

但是, 一個網站, 這么多頁面服務器如何處理呢?

• 一個頁面有自己對應的網址, 也就是URL。

• URL會發送到服務器, 服務器會通過正則對該URL進行匹配, 并且最后交給一個Controller進行處理。

• Controller進行各種處理, 最終生成HTML或者數據, 返回給前端。

• 這就完成了一個IO操作。

上面的這種操作, 就是后端路由。

• 當我們頁面中需要請求不同的路徑內容時, 交給服務器來進行處理, 服務器渲染好整個頁面, 并且將頁面返回給客戶端。

• 這種情況下渲染好的頁面, 不需要單獨加載任何的js和css, 可以直接交給瀏覽器展示, 這樣也有利于SEO的優化。

后端路由的缺點:

• 一種情況是整個頁面的模塊由后端人員來編寫和維護的。

• 另一種情況是前端開發人員如果要開發頁面, 需要通過PHP和Java等語言來編寫頁面代碼。

• 而且通常情況下HTML代碼和數據以及對應的邏輯會混在一起, 編寫和維護都是非常糟糕的事情。

前端路由階段

前后端分離階段：

• 隨著Ajax的出現, 有了前后端分離的開發模式。

• 后端只提供API來返回數據, 前端通過Ajax獲取數據, 并且可以通過JavaScript將數據渲染到頁面中。

• 這樣做最大的優點就是前后端責任的清晰, 后端專注于數據上, 前端專注于交互和可視化上。

• 并且當移動端(iOS/Android)出現后, 后端不需要進行任何處理, 依然使用之前的一套API即可。

• 目前很多的網站依然采用這種模式開發。

單頁面富應用階段:

• 其實SPA最主要的特點就是在前后端分離的基礎上加了一層前端路由。

• 也就是前端來維護一套路由規則。

前端路由的核心是什么呢？

• 改變URL，但是頁面不進行整體的刷新。

• 如何實現呢？

URL的hash

URL的hash也就是錨點(#)，本質上是改變window.location的href屬性。

我們可以通過直接賦值location.hash來改變href，但是頁面不發生刷新。

HTML5的history模式

history接口是HTML5新增的，它有五種模式改變URL而不刷新頁面。

1）history.pushState()

2）history.replaceState()

3）history.go()

4）history.back()

等價于 history.go(-1)

5）history.forward()

等價于 history.go(1)

1. 安裝和使用

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構建單頁面應用。我們可以訪問其官方網站對其進行學習: https://router.vuejs.org/zh/。

vue-router是基于路由和組件的：

• 路由用于設定訪問路徑, 將路徑和組件映射起來.

• 在vue-router的單頁面應用中, 頁面的路徑的改變就是組件的切換.

1）安裝和配置

步驟一: 安裝vue-router

npm install vue-router --save

步驟二: 在模塊化工程中使用它(因為是一個插件, 所以可以通過Vue.use()來安裝路由功能)

• 第一步：導入路由對象，并且調用 Vue.use(VueRouter)

• 第二步：創建路由實例，并且傳入路由映射配置

• 第三步：在Vue實例中掛載創建的路由實例

/* /router/index.js */ import Vue from 'vue' import VueRouter from 'vue-router' //1.通過Vue.use(插件)，安裝插件 Vue.use(VueRouter)//2.創建VueRouter對象 const routes = [] const router = new VueRouter({//配置路由和組件之間的關系routes });//3.將router對象傳入到Vue實例，導出 export default router /* /main.js */ import Vue from 'vue' //引入router模塊 import router from './router' Vue.config.productionTip = falsenew Vue({el: '#app',//使用routerrouter,render: h => h('h2', { class: 'he' }, ['hello world']), })

2）使用Vue-router的步驟

• 第一步: 創建路由組件

• 第二步: 配置路由映射: 組件和路徑映射關系

• 第三步: 使用路由: 通過<router-link>和<router-view>

<router-link>: 該標簽是一個vue-router中已經內置的組件，它會被渲染成一個<a>標簽。

<router-view>: 該標簽會根據當前的路徑，動態渲染出不同的組件。

網頁的其他內容, 比如頂部的標題/導航，或者底部的一些版權信息等會和<router-view>處于同一個等級。

在路由切換時, 切換的是<router-view>掛載的組件，其他內容不會發生改變。

• 最終效果：

3）細節處理

路由的默認路徑

默認情況下, 進入網站的首頁, 我們希望<router-view>渲染首頁的內容。

但是我們的實現中, 默認沒有顯示首頁組件, 必須讓用戶點擊才可以。

如何可以讓路徑默認跳到到首頁, 并且渲染首頁組件呢?

非常簡單, 我們只需要配置多配置一個映射就可以了：

const routes = [{path: '/', //path配置的是根路徑: /redirect: '/home' //redirect是重定向, 也就是我們將根路徑重定向到/home的路徑下, 這樣就可以得到我們想要的結果了} ]

HTML5的History模式

我們前面說過改變路徑的方式有兩種:

• URL的hash

• HTML5的history

默認情況下, 路徑的改變使用的URL的hash。

如果希望使用HTML5的history模式, 非常簡單, 進行如下配置即可:

const router = new VueRouter({routes,mode: 'history' })

router-link補充

在前面的<router-link>中, 我們只是使用了一個屬性: to, 用于指定跳轉的路徑。

<router-link>還有一些其他屬性:

• tag: tag可以指定<router-link>之后渲染成什么組件

  <router-link to='/home' tag='li'></router-link> <!-- 比如上面的代碼會被渲染成一個<li>元素, 而不是<a> -->

• replace: replace不會留下history記錄, 所以指定replace的情況下, 后退鍵返回不能返回到上一個頁面中

• active-class: 當<router-link>對應的路由匹配成功時, 會自動給當前元素設置一個router-link-active的class, 設置active-class可以修改默認的名稱：

  ?在進行高亮顯示的導航菜單或者底部tabbar時, 會使用到該類

  ?但是通常不會修改類的屬性, 會直接使用默認的router-link-active即可

修改linkActiveClass

該class具體的名稱也可以通過router實例的屬性進行修改 :

exact-active-class：

類似于active-class, 只是在精準匹配下才會出現的class。之后在嵌套路由時, 我們再使用這個屬性。

路由代碼跳轉

有時候, 頁面的跳轉可能需要執行對應的JavaScript代碼, 這個時候, 就可以使用第二種跳轉方式了：

2. 動態路由

在某些情況下，一個頁面的path路徑可能是不確定的。比如我們進入用戶界面時，希望是如下的路徑：

/user/aaaa或/user/bbbb

除了有前面的/user之外，后面還跟上了用戶的ID。這種path和Component的匹配關系，我們稱之為動態路由(也是路由傳遞數據的一種方式)。

//router const routes = [{path: 'user/:id',Component: User} ] <!-- components/User.vue --> <div><h2>{{$route.params.id}}</h2><!-- 顯示當前路由id --> </div> <!-- App.vue --> <template><div id="app"><!-- 使用v-bind動態綁定屬性 --><router-link :to="'/user/'+id">用戶</router-link><router-view></router-view></div> </template><script> export default {name: 'App',data() {return {id: 'lisi'}} } </script>

3. 路由懶加載

認識路由懶加載

官方給出了解釋:

• 當打包構建應用時，Javascript 包會變得非常大，影響頁面加載。

• 如果我們能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了。

官方在說什么呢?

• 首先, 我們知道路由中通常會定義很多不同的頁面。

• 這個頁面最后被打包在哪里呢? 一般情況下, 是放在一個js文件中。

• 但是, 頁面這么多放在一個js文件中, 必然會造成這個頁面非常的大。

• 如果我們一次性從服務器請求下來這個頁面, 可能需要花費一定的時間, 甚至用戶的電腦上還出現了短暫空白的情況。

• 如何避免這種情況呢? 使用路由懶加載就可以了。

路由懶加載做了什么?

• 路由懶加載的主要作用就是將路由對應的組件打包成一個個的js代碼塊。只有在這個路由被訪問到的時候, 才加載對應的組件。

效果：

• 直接打包使用：

  [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-68b5uDvQ-1621222566825)(B:\picgo_pics\image-20210508200112106.png)]

• 使用路由懶加載：

  [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-sp3MTu1S-1621222566826)(B:\picgo_pics\image-20210508200136524.png)]

懶加載的方式

方式一：結合Vue的異步組件和Webpack的代碼分析

const Home = resolve => { require.ensure(['../components/Home.vue'], () => { resolve(require('../components/Home.vue')) })};

方式二： AMD寫法

const About = resolve => require(['../components/About.vue'], resolve);

方式三：在ES6中, 我們可以有更加簡單的寫法來組織Vue異步組件和Webpack的代碼分割

const Home = () => import('../components/Home.vue') //router/index.js const User = () => import("../components/User")//使用路由懶加載方式引入 const routes = [{path: '/user/:id',component: User} ]

4. 嵌套路由

1）認識嵌套路由

嵌套路由是一個很常見的功能

• 比如在home頁面中, 我們希望通過/home/news和/home/message訪問一些內容。

• 一個路徑映射一個組件, 訪問這兩個路徑也會分別渲染兩個組件。

路徑和組件的關系如下:

實現嵌套路由有兩個步驟：

創建對應的子組件, 并且在路由映射中配置對應的子路由

在組件內部使用<router-view>標簽

2）嵌套路由實現

定義兩個子組件

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-YzUeRbgr-1621222566828)(B:\picgo_pics\image-20210508205312364.png)]

在組件內部使用

路由映射中配置對應的子路由

結果

嵌套默認路徑：

嵌套路由也可以配置默認的路徑, 配置方式如下:

5. 傳遞參數

準備工作

為了演示傳遞參數, 我們這里再創建一個組件, 并且將其配置好

• 第一步: 創建新的組件Profile.vue

• 第二步: 配置路由映射

• 第三步: 添加跳轉的

傳遞參數的方式

傳遞參數主要有兩種類型: params和query

params的類型:

• 配置路由格式: /router/:id

• 傳遞的方式: 在path后面跟上對應的值

• 傳遞后形成的路徑: /router/123，/router/abc

query的類型:

• 配置路由格式: /router，也就是普通配置

• 傳遞的方式: 對象中使用query的key作為傳遞方式

  <!-- APP.vue --> <router-link :to="{path: '/profile', query: {name: 'nick', age: 18}}"></router-link> <!-- 形成的路徑：/profile?name=nick&age=18 -->

• 傳遞后形成的路徑: /router?id=123，/router?id=abc

如何使用它們呢? 也有兩種方式: <router-link>的方式和JavaScript代碼方式。

方式1：<router-link>

方式2：JavaScript代碼

獲取參數

獲取參數通過$route對象獲取的。

在使用了 vue-router 的應用中，路由對象會被注入每個組件中，賦值為 this.$route ，并且當路由切換時，路由對象會被更新。

通過$route獲取傳遞的信息如下:

$route和$router是有區別的

$route和$router是有區別的

• $router為VueRouter實例，想要導航到不同URL，則使用$router.push方法

• $route為當前router跳轉對象里面可以獲取name、path、query、params等

6. 全局導航守衛

什么是導航守衛？

我們來考慮一個需求: 在一個SPA應用中, 如何改變網頁的標題呢?

• 網頁標題是通過<title>來顯示的, 但是SPA只有一個固定的HTML, 切換不同的頁面時, 標題并不會改變。

• 但是我們可以通過JavaScript來修改<title>的內容。window.document.title = '新的標題'。

• 那么在Vue項目中, 在哪里修改? 什么時候修改比較合適呢?

普通的修改方式:

• 我們比較容易想到的修改標題的位置是每一個路由對應的組件.vue文件中。

• 通過mounted聲明周期函數, 執行對應的代碼進行修改即可。

• 但是當頁面比較多時, 這種方式不容易維護(因為需要在多個頁面執行類似的代碼)。

有沒有更好的辦法呢? 使用導航守衛即可。

什么是導航守衛?

• vue-router提供的導航守衛主要用來監聽路由的進入和離開的。

• vue-router提供了beforeEach和afterEach的鉤子函數, 它們會在路由即將改變前和改變后觸發。

導航守衛的使用

我們可以利用beforeEach來完成標題的修改。

首先, 我們可以在鉤子當中定義一些標題, 可以利用meta來定義

其次, 利用導航守衛,修改我們的標題

導航鉤子的三個參數解析：

• to: 即將要進入的目標的路由對象

• from: 當前導航即將要離開的路由對象

• next: 調用該方法后, 才能進入下一個鉤子

可能出現的問題：其他路由頁面標題正常顯示，但是主頁面的標題為undefined。可以將代碼改動如下：

router.beforeEach((to, from, next) => {document.title = to.matched[0].meta.titlenext() })

導航守衛補充

補充一:如果是后置鉤子, 也就是afterEach, 不需要主動調用next()函數

補充二: 上面我們使用的導航守衛, 被稱之為全局守衛

• 路由獨享的守衛

• 組件內的守衛

更多內容, 可以查看官網進行學習：

VueRouter - 導航守衛

7. keep-alive

keep-alive 是 Vue 內置的一個組件，可以使被包含的組件保留狀態，或避免重新渲染。

它們有兩個非常重要的屬性:

• include - 字符串或正則表達，只有匹配的組件會被緩存

• exclude - 字符串或正則表達式，任何匹配的組件都不會被緩存

router-view 也是一個組件，如果直接被包在 keep-alive 里面，所有路徑匹配到的視圖組件都會被緩存：

activated()和deactivated()兩個周期函數，只有該組件保持了狀態使用了keep-alive時，才是有效的。

總結

以上是生活随笔為你收集整理的Vue学习笔记（4）（Vue-router）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。