Vue学习笔记（4）（Vue-router）
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實例中掛載創建的路由實例
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和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）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java设计模式_工厂方法
- 下一篇： win7中cookie的保存位置