Vue路由

Vue Router

一、對前端路由的理解

路由：路由是url到函式的映射，可以根據不同的url地址展示不同的內容或頁面，

• 服務器端路由（后端路由）
  • 對于服務器來說，當接收到客戶端發來的HTTP請求，會根據請求的URL，來找到相應的映射函式，然后執行該函式，并將函式的回傳值發送給客戶端，
• 客戶端路由（前端路由）
  • 早期的路由都是后端實作的，直接根據 url 來 reload 頁面，頁面變得越來越復雜服務器端壓力變大，隨著 ajax 的出現，頁面實作非 reload 就能重繪資料，更新頁面內容，使內容的切換更加流暢，可以通過記錄 url 來記錄 ajax 的變化，從而實作前端路由，對于客戶端（通常為瀏覽器）來說，路由的映射函式通常是進行一些DOM的顯示和隱藏操作，這樣，當訪問不同的路徑的時候，會顯示不同的頁面組件，
  • 前端路由可以幫助我們在僅有一個頁面的情況下，“記住”用戶當前走到了哪一步——為 SPA 中的各個視圖匹配一個唯一標識，這意味著用戶前進、后退觸發的新內容，都會映射到不同的 URL 上去，此時即便他重繪頁面，因為當前的 URL 可以標識出他所處的位置，因此內容也不會丟失，

二、Vue-router跳轉和location.href有什么區別

• 使用 location.href= https://www.cnblogs.com/P1Kaj1uu/archive/2022/12/26/‘/url’ 來跳轉，簡單方便，但是重繪了頁面
• 引進 router ，然后使用 router.push( ‘/url’ ) 來跳轉，無重繪頁面，靜態跳轉，使用了 diff 演算法，實作了按需加載，減少了 dom 的消耗，使用 router 跳轉底層是用history.pushState()

三、$route 和$router 的區別

• $route 是“路由資訊物件”，包括 name，path，params，query，meta，fullPath，hash、matched等路由資訊引數

• $router 是“路由實體”物件，包括了路由的跳轉方法，鉤子函式等，可以使用$router.push()、$router.replace()、$router.go()等

四、params和query的區別

• 用法不同
  • params要用name來引入；接收引數this.$route.params.name；在路由資訊配置時路徑path需要占位
  • query可以用name和path來引入；接收引數this.$route.query.name；在路由資訊配置時路徑path不需要占位
• url地址顯示不同
  • params則類似于post，在瀏覽器地址欄中不顯示引數
  • query更加類似于ajax中get傳參，在瀏覽器地址欄中顯示引數
• 重繪不同
  • params重繪會丟失 params里面的資料（可考慮采取本地存盤解決此問題）
  • query重繪不會丟失query里面的資料

五、 路由的hash和history模式的區別

1.hash路由模式（默認）

• 概述
  • hash模式是開發中默認的模式，它的URL帶著一個#，例如：http://www.abc.com/#/vue，它的hash值就是#/vue，
• 特點
  • hash值會出現在URL里面，但是不會出現在HTTP請求中，對后端完全沒有影響，所以改變hash值，不會重新加載頁面，這種模式的瀏覽器支持度很好，低版本的IE瀏覽器也支持這種模式，hash路由被稱為是前端路由，已經成為SPA（單頁面應用）的標配，
• 原理
  • hash模式的主要原理就是onhashchange()事件
  • 使用onhashchange()事件的好處就是，在頁面的hash值發生變化時，無需向后端發起請求，window就可以監聽事件的改變，并按規則加載相應的代碼，除此之外，hash值變化對應的URL都會被瀏覽器記錄下來，這樣瀏覽器就能實作頁面的前進和后退，雖然是沒有請求后端服務器，但是頁面的hash值和對應的URL關聯起來了，

2.history路由模式

• 概述

  • history模式的URL中沒有#，它使用的是傳統的路由分發模式，即用戶在輸入一個URL時，服務器會接收這個請求，并決議這個URL，然后做出相應的邏輯處理，

• 特點

  • 當使用history模式時，URL就像這樣：http://abc.com/user/id，相比hash模式更加好看，但是，history模式需要后臺配置支持，如果后臺沒有正確配置，訪問時會回傳404，

• API

  • history api可以分為兩大部分，切換歷史狀態和修改歷史狀態：
  • 切換歷史狀態
    • 包括了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法，這兩個方法應用于瀏覽器的歷史記錄堆疊，提供了對歷史記錄進行修改的功能，只是當他們進行修改時，雖然修改了url，但瀏覽器不會立即向后端發送請求，如果要做到改變url但又不重繪頁面的效果，就需要前端用上這兩個API，
  • 修改歷史狀態
    • 包括forward()、back()、go()三個方法，對應瀏覽器的前進，后退，跳轉操作，

• 切換為history模式

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

3.呼叫 history.pushState() 與直接修改 hash對比

• pushState() 設定的新 URL 可以是與當前 URL 同源的任意 URL；而 hash 只可修改 # 后面的部分，因此只能設定與當前 URL 同檔案的 URL
• pushState() 設定的新 URL 可以與當前 URL 一模一樣，這樣也會把記錄添加到堆疊中；而 hash 設定的新值必須與原來不一樣才會觸發動作將記錄添加到堆疊中
• pushState() 通過 stateObject 引數可以添加任意型別的資料到記錄中；而 hash 只可添加短字串
• pushState() 可額外設定 title 屬性供后續使用
• hash模式下，僅hash符號之前的url會被包含在請求中，后端如果沒有做到對路由的全覆寫，也不會回傳404錯誤；history模式下，前端的url必須和實際向后端發起請求的url一致，如果沒有對用的路由處理，將回傳404錯誤

六、如何獲取頁面的hash變化

• window.location.hash讀取#值

  • window.location.hash 的值可讀可寫，讀取來判斷狀態是否改變，寫入時可以在不多載網頁的前提下，添加一條歷史訪問記錄，

• 監聽$route的變化

  // 監聽，當路由發生變化的時候執行
  watch: {
  	$route: {
  		handler: function (val, oldVal) {
  			console.log(val)
  		},
  		// 深度觀察監聽
  		deep: true
  	}
  }
  

七、如何定義動態路由？如何獲取傳過來的動態引數？

• params傳參
  • 路由格式
    • 配置路由格式：/router/:id
    • 傳遞的方式：在path后面跟上對應的值
    • 傳遞后形成的路徑：/router/123
  • 接收引數
    • 通過 $route.params.userid 獲取傳遞的值
• query傳參
  • 路由格式
    • 配置路由格式：/router？key1=value1&key2=value2
    • 傳遞的方式：物件中使用query的key作為傳遞方式
    • 傳遞后形成的路徑：/route?id=123&uname=cara
  • 接收引數
    • 通過$route.query.userid獲取傳遞的值

八、Vue-router 的懶加載如何實作

• 非懶加載

  import List from '@/components/list.vue'
  const router = new VueRouter({
  	routes: [
  		{
  			path: '/list',
  			component: List
  		}	
  	]
  })
  

• 懶加載

  • 使用箭頭函式+import動態加載

    const router = new VueRouter({
    	routes: [
    		{
    			path: '/list',
    			component: () => import('@/components/list.vue')
    		}	
    	]
    })
    

  • 使用箭頭函式+require動態加載

  • webpack

九、Vue-router 導航守衛

• 全域守衛（前置/后置）：beforeEach、beforeResolve、afterEach
• 路由獨享的守衛：beforeEnter
• 組件內的守衛：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

標籤：其他

上一篇：JavaScript 中0.1+0.2 不等于 0.3 的問題

下一篇：JavaScript 中0.1+0.2 不等于 0.3 的問題