1.1、<router-link>標簽

<router-link>標簽的作用是實現路由之間的跳轉功能，默認情況下，<router-link>標簽是采用超鏈接<a>標簽顯示的，通過to屬性指定需要跳轉的路由地址。當然，如果你不想使用默認的<a>標簽，也可以使用tag屬性自定義其他的標簽。

<router-link>標簽中的屬性有下面這些：

?注意：<router-link>標簽可以在不進行頁面刷新的情況下，改變瀏覽器的URL地址，并觸發相應路由的更新，使得<router-view>組件能夠渲染與新路由對應的內容。

1.2、<router-view>標簽

<router-view>標簽的作用是指定路由視圖，也就是指定顯示具體路由組件的區域，它相當于一個路由區域占位符，當路由切換的時候，會將路由對應的組件內容顯示在<router-view>標簽所在的位置之上。

需要注意的是，一個<router-view>標簽只能顯示一層路由，如果在router/index.js文件中存在多級嵌套路由，那么在對應的父路由組件中，也必須使用<router-view>標簽，這樣才可以將子路由的內容顯示到父路由組件中指定的位置。

• 有PageA.vue和PageB.vue組件，App.vue組件中使用了<router-view>標簽，那么PageA.vue和PageB.vue組件的內容就會顯示在App.vue組件中的<router-view>標簽所在位置。

• 現在給PageA.vue組件創建兩個子組件，分別是：PageA1.vue和PageA2.vue，并且在router/index.js路由文件中，定義嵌套路由信息。

?

• 接著，要想正確顯示PageA1.vue和PageA2.vue子路由的組件內容，那么就必須在PageA.vue父組件中，使用<router-view>標簽。

1.3、router對象?

1.3.1、options屬性

options屬性可以拿到兩個對象，分別是history和routes，其中routes對象是當前項目中所有路由信息組成的一個數組，history對象其實就是瀏覽器中的window.history歷史訪問記錄對象。

router對象中有一個options屬性，通過這個options屬性可以拿到兩個對象，分別是history和routes，其中routes對象是當前項目中所有路由信息組成的一個數組，history對象其實就是瀏覽器中的window.history歷史訪問記錄對象。

1.3.2、路由跳轉

router對象中提供了幾個路由跳轉的方法，分別是router.push()、router.replace()、router.go()、router.back()、router.forward()這五個方法，其中最常用的是router.push()和router.replace()。

• router.push()方法作用：跳轉到指定路由地址，不會替換歷史訪問記錄中的當前路由。舉個例子：

  • 假設現在已經訪問過A，B，C三個路由，當前處于C路由位置，接下來要使用router.push()跳轉到D路由，那么此時新的歷史訪問記錄將變成：A，B，C，D三個路由。

  • 因為D路由會追加到原先的歷史記錄里面。

• router.replace()方法作用：跳轉到指定路由地址，會替換歷史訪問記錄中的當前路由。舉個例子：

  • 假設現在已經訪問過A，B，C三個路由，當前處于C路由位置，接下來要使用router.replace()跳轉到D路由，那么此時新的歷史訪問記錄將變成：A，B，D三個路由。

  • 因為D路由會替換C路由的記錄。

• router.go(num)方法作用：前進或者后退num個路由，例如：router.go(2)就是前進2個路由。

• router.back()方法作用：后退1個路由，也就是等價于router.go(-1)的作用。

• router.forward()方法作用：前進1個路由，也就是等價于router.go(1)的作用。

1.3.3、useRoute方法：VueRouter插件中，提供了一個useRoute方法，通過這個useRoute方法可以獲取到路由參數等信息。在Vue3中要通過下面方式使用useRoute方法，

// 獲取 route 路由
import {useRoute} from "vue-router";
const route = useRoute();

route對象中，具有下面這些屬性：

• route.name可以獲取到index.js路由配置文件中指定的name屬性值。

• route.meta可以獲取到index.js路由配置文件中指定的meta屬性值，meta是允許用戶自定義的屬性。

?

• route.query可以獲取到路由傳遞的參數，query參數是顯示在瀏覽器地址欄中的，用戶可以看得見。

• route.params可以獲取到動態路由傳遞的參數，params參數會動態替換到路由路徑里面。

• route.path可以獲取當前訪問的路由路徑。

• route.fullPath可以獲取完整的路由訪問路徑，也就是地址欄中端口之后的所有內容。

• route.hash可以獲取到地址欄中的hash字符串，也就是地址欄中#號之后的所有內容。

1.3.4、動態路由：VueRouter插件還可以支持動態路由，所謂的動態路由，其實就是路由路徑中，可以動態的替換參數，動態路由需要在路徑中使用【:】冒號定義路由參數。

• 動態路由的定義格式：
  ?

  {// 動態路由定義格式// 路由路徑/:路由參數1/:路由參數2path: 'B/:id/:name',name:'demo_B',component: () => import('../components/demo02/DemoB.vue')
  },

  動態路由的定義格式：其中路由參數是實際傳遞的參數，需要注意的是，動態路由中的參數必須采用params屬性進行傳遞，一定不能使用query屬性，一定不能使用query屬性，一定不能使用query屬性。

• 通過<router-link>使用動態路由。
  ?

  <!-- 動態路由 params 中的參數名稱，必須和動態路由中配置的相同，這樣才可以正確接受到參數
  -->
  <router-link :to="{name:'demo_B',params:{id:1,name:'Tom'}}">B</router-link>

• 通過router.push()方法使用動態路由。
  ?

  // 動態路由訪問
  router.push({name: 'demo_B',params: {id: 1,name: 'Tom'}
  });