1. 路由的監聽原理：

1.1 URL的hash（通過改變URL的hash值，讓頁面不發生重新整理）

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

我們可以通過直接賦值location.hash來改變href, 但是頁面不發生重新整理；

hash的優勢就是相容性更好，在老版IE中都可以執行，但是缺陷是有一個#，顯得不像一個真實的路徑

1.2 history介面是HTML5新增的, 它有l六種模式改變URL而不重新整理頁面

2. 版本管理

[email protected] --> 最後1位（2）一般是小bug修復，中間1位（1）一般是新增功能，第一位（3）一般是大的版本更新

3. vue-router基本使用：配置（index）--安裝（main）--展示（App）

4. 配置（index）

4.1 配置預設路徑

4.2 配置Not Found路徑

4.3 配置history模式

4.4.1 配置路由懶載入

4.4.2 打包後出現map檔案

作用：專案打包後，程式碼都是經過壓縮加密的，如果執行時報錯，輸出的錯誤資訊無法準確得知是哪裡的程式碼報錯。有了map就可以像未加密的程式碼一樣，準確的輸出是哪一行哪一列有錯。所以該檔案如果專案不需要是可以去除掉。

解決辦法：去src/config/index.js中改一個引數：

productionSourceMap:false 

4.5 配置中的其他屬性（路由巢狀）

• name屬性 ：路由記錄獨一無二的名稱
• meta屬性：自定義的資料
• children屬性：路由巢狀，放置子路由

4.6 動態路由的基本匹配

4.7 動態“新增”路由

4.8 動態刪除路由

4.9 導航守衛beforeEach：主要用來通過跳轉或取消的方式守衛導航

• to引數: Route物件, 即將跳轉到的Route物件
• from引數: Route物件, 從哪一個路由物件導航過來的
• 返回值問題:
  • 1.false: 不進行導航
  • 2.undefined或者不寫返回值: 進行預設導航
  • 3.字串: 路徑, 跳轉到對應的路徑中
  • 4.物件: 類似於 router.push({path: "/login", query: ....})

5 展示（App）router-link和router-view

5.1 router-link的引數

<router-link>元件支援使用者在具有路由功能的應用中點選導航。如果通過其他方式比如this.$router.push()等方式進行了路由跳轉，就不用寫<router-link>了

• to屬性：字串/物件，路由對應的元件名稱
• replace屬性：當點選時，會呼叫 router.replace()，而不是 router.push()，就沒有返回了
• active-class屬性：設定啟用a元素後應用的class，預設是router-link-active
• exact-active-class屬性：連結精準啟用時，應用於渲染的<a>的class，預設是router-link-exact-active，應用在路由巢狀的場景（路徑完全匹配時新增）
• custom屬性：表示整個元素要自定義，取消預設的a標籤，一般結合使用
  • 插槽方式自定義標籤（無引數）：

• • v-slot=“props”（作用域插槽）（可傳參）：

• • props: href 跳轉的連結
  • props: route物件
  • props: navigate導航函式
  • props: isActive 是否當前處於活躍的狀態
  • props: isExactActive 是否當前處於精確的活躍狀態

5.2 問題：剛才為了讓路由元件之間能夠跳轉，我們使用了router-link標籤。如果我們不想要寫router-link呢？

解答：可以通過元件的$router屬性實現同樣的效果：

<template>
  <div id="app">
    <button @click="homeClick">首頁</button>
    <button @click="aboutClick">關於</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    homeClick () {
      // 通過程式碼的方式修改路由 vue-router
      // this.$router.push('/home');
      this.$router.replace('/home');
    },
    aboutClick () {
      // this.$router.push('/about');
      this.$router.replace('/about');
    }
  }
}
</script>

5.3 router-view的增強

• v-slot=“props”
  • props.Component屬性：要渲染的元件

5.4 程式設計式導航：通過程式碼的方式實現路由跳轉（optionsAPI和compositionAPI）

5.5  補充：$router  和  $route  區別

r o u t e 就是表示，當前哪個路由處於活躍狀態，這個route表示的就是哪個路由元件。

r o u t e r 是我們在router/index.js當中建立的router物件，就是路由物件。這個路由物件當中有好幾個路由。哪個路由處於活躍狀態，route就是表示哪個路由元件。

6. keep-alive使用

6.1 作用

 6.1.1 可以使被包含的元件保留狀態，避免元件頻繁的被建立和銷燬

• 它們有兩個非常重要的屬性:
• include - 字串或正則表達，只有匹配的元件會被快取
• exclude - 字串或正則表示式，任何匹配的元件都不會被快取

6.2 使用

keep-alive包裹router-view時，對應所有路徑的元件都會被快取

6.3 場景應用（返回的頁面處於離開時的路由頁面）