在 Vue 中如何使用路由參數？

Vue.js 是一個輕量級的 JavaScript 框架，可以讓開發者快速開發出高品質的 Web 應用程式。Vue.js 提供了一個路由系統，可以讓開發者將不同的 URL 對應到不同的內容，並且可以使用路由參數來控制內容的顯示。本文將介紹如何在 Vue 中使用路由參數。

安裝 Vue Router

首先，我們需要安裝 Vue Router，它是 Vue.js 的路由系統。可以使用 npm 或 yarn 來安裝：

npm install vue-router
yarn add vue-router

設定路由

接下來，我們需要設定路由，以將不同的 URL 對應到不同的內容。我們可以使用 Vue Router 的 routes 選項來設定路由：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

上面的程式碼會將 / 路徑對應到 Home 組件，將 /about 路徑對應到 About 組件。

使用路由參數

Vue Router 提供了一個 params 選項，可以用來接收路由參數：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      params: {
        id: '123'
      }
    }
  ]
})

上面的程式碼會將 /user/:id 路徑對應到 User 組件，並且將 id 參數設置為 123。

我們可以在 User 組件中使用 this.$route.params.id 來獲取路由參數：

export default {
  data() {
    return {
      userId: this.$route.params.id
    }
  }
}

上面的程式碼會將 userId 變量設置為路由參數 id 的值。

總結

本文介紹了如何在 Vue 中使用路由參數。我們首先安裝 Vue Router，然後設定路由，最後使用 params 選項來接收路由參數。

Vue Router 提供了一個強大的路由系統，可以讓開發者將不同的 URL 對應到不同的內容，並且可以使用路由參數來控制內容的顯示。