19. 路由參數與監控

query 和 params

vue-router 提供兩種參數，可以在網址上處理資料。

• query：適合用在分頁、臨時要使用的 id 等。
  • 例如：localhost:8080/#/iron?day=1
• params：產生的網址看起來會比較乾淨、簡潔、整齊。
  • 例如：localhost:8080/#/iron/1

觸發 query 改變網頁資料

讓網址參數與畫面上的資料連動，使得改變路由參數時，畫面上的資料也會跟著改變。

將 component 加入路由

先將 component 加入路由管理。

//- route/index.js

{
    path: '/iron',
    name: 'Iron',
    component: () => import( /* webpackChunkName: "iron" */ '../views/Iron.vue')
  }

取得網址參數

• 使用 this.$route.query.day 可以取得目前路由網址中的 day 參數值。
  • 例如 http://localhost:8080/iron?day=11 的 day 值為 11。
• 在 mounted 階段讀取，取得的值為字串，轉換成數字後儲存到變數 day 中。

//- views/Iron.vue

  mounted(){
    let day = parseInt(this.$route.query.day, 10) - 1
    this.day = day
    document.addEventListener("keyup", this.changeHandler)
  },

監看參數的改變

vue-router 會攔截網址改變事件。如果參數改變但路由不變，就不會重整網頁，不會改變畫面。解決方法是用 watch 監看參數：

//- views/Iron.vue

watch: {
    $route(){
      let day = parseInt(this.$route.query.day) - 1
      this.day = day
    }
  }

使用 params 簡化路由

簡化網址，像是用 http://localhost:8080/iron/16 顯示第 16 筆資料。

設定路由參數

設定路由參數 day ：

//- route/index.js

{
    path: '/iron/:day',
    name: 'Iron',
    component: () => import( /* webpackChunkName: "iron" */ '../views/Iron.vue')
  }

但如果只是這樣，會發現要是網址列沒有輸入 day 參數，輸入網址 http://localhost:8080/iron 的時候，畫面會沒有資料出現，因此要另外設定沒有 params 參數時的情況。

//- route/index.js

  // 沒有 params 參數
  {
    path: '/iron',  
    name: 'Iron',
    component: () => import( /* webpackChunkName: "iron" */ '../views/Iron.vue')
  },
  // 有 params 參數
  {
    path: '/iron/:day',
    name: 'Iron',
    component: () => import( /* webpackChunkName: "iron" */ '../views/Iron.vue')
  }

除了上面的寫法，我們也可以去設定子路由，或者使用 redirect 屬性去預設首頁導到 params = 1 的畫面。

//- route/index.js

  {
    path: '/iron',
    redirect: '/iron/1'  // 預設首頁導到 params = 1 的畫面
  },
  {
    path: '/iron/:day',
    name: 'Iron',
    component: () => import( /* webpackChunkName: "iron" */ '../views/Iron.vue')
  }

取得並監看參數

這部分跟 query 差不多，只是將 $route.query 改成 $route.params 來取得網址的 params 參數並進行監看。

//- views/Iron.vue

  mounted(){
    let day = parseInt(this.$route.params.day) - 1
    this.day = day
    document.addEventListener("keyup", this.changeHandler)
  },
  watch: {
    $route(){
      let day = parseInt(this.$route.params.day) - 1
      this.day = day
    }
  }