2023 Vue直播班筆記 - $route及$router

此筆記僅以個人理解的方式記錄

前言

這次要講的是 $route 及 $router 的區別，看似相似的兩個東西，其實應用時機也大不相同，以下以簡單的幾個例子舉例。

$route

先準備個元件名叫 PageA.vue，路徑為 '/pageA' 時 router-view 會渲染其組件

<template>
  <p>pageA</p>
  <button @click="getRoute">getRoute</button>
</template>
<script>
  export default{
    methods:{
      getRoute(){
        console.log(this.$route);
      }
    }
  }
</script>
<style scoped></style>

當我們點擊 getRoute 按紐時，會印出當前路由的資訊。

• fullpath : 為整路徑
• params : 路由攜帶參數
• query : 篩選搜尋參數
• 等等...

如果將路徑調整為 "/pageA/apple?like=mary" ，我們可以看到原本 /pageA 後面多了 apple 以及 ?like=mary 。如果你的路徑有設成 "/pageA/:userId" 的動態路由，這時候也可以利用 this.$route 取得，而 mary 為 query 選擇，如下圖

$router

$Router 為路由的 "方法" ，跟上面的 $route 不同，這邊舉例幾個常用的方法來介紹。

- push()

有包含歷史紀錄，假設要去 "/pageA" ，可這樣下 this.$router.push("/pageA") ，如果想使用 name 來導覽的話則 this.$router.push( {name:'名稱'} ) ，路由名稱為路由 JS 內設定，如下圖

- replace()

沒有!!!歷史紀錄，跟push不同

- go()

操作歷史紀錄的手段，如果下達 this.$router.go(-1) ，這樣會返回上一頁，

想返得知如果下達 this.$router.go(1) ，就為下一頁

- addRoute()

為臨時新增路由的方式，使用方式為 this.$router.addRoute( { } ) 這裡面是放物件，我新增了一個名為 "/newpageA" 的路徑，該路徑會對應到 "PageA.vue

" 組件。

• joker
• 2024/03/08