# Vue學習#32 如何用Vue 監聽動態路由?
###### tags: `Vue 直播班 - 2022 春季班`

在談使用方法之前，我們可以先講一下為何我們需要監聽動態路由。

當我們使用[動態路由匹配](https://book.vue.tw/CH4/4-2-route-settings.html)功能時，可能會在頁面中跳轉至其他也由動態路由生成的頁面，此時可能會發生「網址的 id 有變動但畫面沒有變動」的狀況。

個人判斷是因為 Vue 將此判定皆為同一個頁面所致。

因此我們需要監聽動態路由變動，來達成我們需要的跳轉效果。

開始監聽
我們首先可以先在 data 定義一個 pageId，並賦值為 $route.params.id

 data () {
    return {
      pageId: this.$route.params.id,
    }
  },

接著開始監聽路由變化，每當 $route 的值變動時，就將pageId重新賦值為to.params.id。

($route 有 from 和 to 兩個參數，from 代表現在所在的頁面，to 代表要前往的頁面。)

接著傳出一個 $emit 重新刷新頁面

watch: {
    // 監聽動態路由變化
    $route (to) {
      this.pageId = to.params.id
      this.$emit('change-page')
    }
  },

這樣就完成啦~

## 參考
[來自同學筆記](https://hackmd.io/@Zihyin/HJfSidB7c)