Vue3路由參數獲取詳解：從URL中獲取參數的方法

在Vue3中，路由參數的獲取是十分常見的功能，因為它可以幫助我們實現頁面的跳轉和數據的傳遞。在本文中，我們將會從多個方面詳細闡述Vue3路由參數的獲取方法，幫助讀者更好地掌握這個在Vue3中非常重要的功能。

一、動態路由參數的獲取

在Vue3中，我們可以通過動態路由參數來獲取傳遞進來的數據。當我們在定義路由規則時，使用冒號來定義一個動態的路由參數。例如，我們使用以下代碼來定義一個動態路由參數：

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/user/:id',
      name: 'User',
      component: User
    }
  ]
})

在這個定義中，我們使用了:path來表示這是一個動態路由參數，我們可以在路由跳轉的時候獲取這個參數的值。例如，我們在User組件中可以使用以下方式來獲取路由參數：

export default {
  name: 'User',
  props: ['id'],
  mounted() {
    console.log(this.id)
  }
}

在這個代碼中，我們使用了props來傳遞路由參數。路由參數的名稱就是我們在路由規則中定義的名稱，在這個例子中，我們定義了名為id的動態路由參數。在組件中，我們可以通過this.id來獲取到傳遞進來的路由參數。

二、通過$route對象來獲取路由參數

在Vue3中，我們也可以通過$route對象來獲取路由參數。$route是一個全局對象，它存儲了當前路由的相關信息，包括路由參數的值。

我們可以使用this.$route.params來獲取動態路由參數的值。例如，我們可以使用以下代碼來在User組件中獲取路由參數：

export default {
  name: 'User',
  mounted() {
    console.log(this.$route.params.id)
  }
}

在這個代碼中，我們使用了this.$route.params.id來獲取動態路由參數id的值。

三、通過query參數來獲取路由參數

除了動態路由參數，我們還可以通過query參數來傳遞路由參數。query參數是以鍵值對的形式添加到URL中的，例如，我們可以使用以下代碼來在路由中定義一個query參數：

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/user',
      name: 'User',
      component: User
    }
  ]
})

在這個定義中，我們沒有使用動態路由參數，而是在URL中添加了一個query參數。我們可以在路由跳轉的時候使用query參數來傳遞數據。例如，我們使用以下代碼來在頁面中跳轉到User組件：

<router-link :to="{ name: 'User', query: { id: 1 } }">Go to User</router-link>

在這個代碼中，我們使用了router-link組件來跳轉到User組件，同時在query參數中添加了一個id鍵值對，傳遞了一個值為1的參數。

我們可以在User組件中使用this.$route.query來獲取query參數的值。例如，我們可以使用以下代碼來在User組件中獲取id參數：

export default {
  name: 'User',
  mounted() {
    console.log(this.$route.query.id)
  }
}

四、總結

通過以上的介紹，我們可以看到，在Vue3中獲取路由參數有多種方法，包括動態路由參數、$route對象和query參數。不同的方法可以適用於不同的需求，在具體實現中，我們可以根據具體的需求選擇最適合的方法來獲取路由參數。