Vue面試 [2]

文章目錄

• ​​1. Vue-Router 的懶加載如何實作​​
• ​​2. 路由的hash和history模式的差別​​
• ​​3. 如何擷取頁面的hash變化​​
• ​​4. router 的差別​​

1. Vue-Router 的懶加載如何實作

非懶加載：

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

（1）方案一(常用)：使用箭頭函數+import動态加載

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

（2）方案二：使用箭頭函數+require動态加載

const router = new Router({
  routes: [
   {
     path: '/list',
     component: resolve => require(['@/components/list'], resolve)
   }
  ]
})
      

（3）方案三：使用webpack的require.ensure技術，也可以實作按需加載。 這種情況下，多個路由指定相同的chunkName，會合并打包成一個js檔案。

// r就是resolve
const List = r => require.ensure([], () => r(require('@/components/list')), 'list');
// 路由也是正常的寫法  這種是官方推薦的寫的 按子產品劃分懶加載 
const router = new Router({
  routes: [
  {
    path: '/list',
    component: List,
    name: 'list'
  }
 ]
}))
      

2. 路由的hash和history模式的差別

Vue-Router有兩種模式：hash模式和history模式。預設的路由模式是hash模式。

1.hash

簡介： hash模式是開發中預設的模式，它的URL帶着一個#，例如：www.abc.com/#/vue，它的hash值就是#/vue。

特點：hash值會出現在URL裡面，但是不會出現在HTTP請求中，對後端完全沒有影響。是以改變hash值，不會重新加載頁面。這種模式的浏覽器支援度很好，低版本的IE浏覽器也支援這種模式。hash路由被稱為是前端路由，已經成為SPA（單頁面應用）的标配。

原理： hash模式的主要原理就是onhashchange()事件：

window.onhashchange = function(event){
  console.log(event.oldURL, event.newURL);
  let hash = location.hash.slice(1);
}
      

使用onhashchange()事件的好處就是，在頁面的hash值發生變化時，無需向後端發起請求，window就可以監聽事件的改變，并按規則加載相應的代碼。除此之外，hash值變化對應的URL都會被浏覽器記錄下來，這樣浏覽器就能實作頁面的前進和後退。雖然是沒有請求後端伺服器，但是頁面的hash值和對應的URL關聯起來了。

2.history模式

簡介： history模式的URL中沒有#，它使用的是傳統的路由分發模式，即使用者在輸入一個URL時，伺服器會接收這個請求，并解析這個URL，然後做出相應的邏輯處理。

特點： 當使用history模式時，URL就像這樣：abc.com/user/id。相比hash模式更加好看。但是，history模式需要背景配置支援。如果背景沒有正确配置，通路時會傳回404。

API： history api可以分為兩大部分，切換曆史狀态和修改曆史狀态：

• 修改曆史狀态：包括了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法，這兩個方法應用于浏覽器的曆史記錄棧，提供了對曆史記錄進行修改的功能。隻是當他們進行修改時，雖然修改了url，但浏覽器不會立即向後端發送請求。如果要做到改變url但又不重新整理頁面的效果，就需要前端用上這兩個API。
• 切換曆史狀态： 包括forward()、back()、go()三個方法，對應浏覽器的前進，後退，跳轉操作。

雖然history模式丢棄了醜陋的#。但是，它也有自己的缺點，就是在重新整理頁面的時候，如果沒有相應的路由或資源，就會刷出404來。

如果想要切換到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模式和history模式都有各自的優勢和缺陷，還是要根據實際情況選擇性的使用。

3. 如何擷取頁面的hash變化

（1）監聽$route的變化

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

4. router 的差別