當使用 Vue 進行單頁應用 (SPA) 開發時，我們需要通過一些技巧獲取瀏覽器當前頁面的 URL 中的參數。比如，在閱讀文章時，我們需要獲取文章的編號 ID，以便獲取相應的文章數據。在 Vue 中獲取 URL 中的 ID 有多種方法，這篇文章將介紹其中兩種。

第一種方法是通過 Vue Router 來獲取 URL 中的 ID。Vue Router 是 Vue 官方的路由管理器，它可以方便地實現 SPA 應用的路由功能。使用 Vue Router 可以規范 URL 結構，方便開發和 SEO，并且可以輕松實現 URL 中參數的獲取。

// router.js
const router = new VueRouter({
mode: "history", // 開啟 History 模式，去除 URL 中的 #
routes: [
{
path: "/article/:id", // 定義動態路由
component: Article
}
]
})
// Article.vue
export default {
computed: {
id() {
return this.$route.params.id // 獲取路由參數 id
}
}
}

這種方法需要在程序入口處定義路由規則，在組件內監聽路由參數的變化。Vue Router 將路由參數保存在 $route.params 對象中，通過 computed 計算屬性可以方便地獲取 $route.params 中的 id 參數。

第二種方法是通過正則表達式獲取 URL 中的 ID。正則表達式是一種文本模式，用于描述字符串匹配的模式。Vue 中的正則表達式可以通過 JavaScript 來實現。這種方法需要對 URL 進行解析，提取出 URL 中的數字 ID。

// Article.vue
export default {
computed: {
id() {
const match = window.location.href.match(/\/article\/(\d+)/) // 匹配 /article/ 后面的數字
if (match) {
return match[1] // 返回第一個捕獲組中的數字，即文章 ID
}
return null
}
}
}

這種方法通過 window.location.href 獲取 URL，然后對 URL 進行正則表達式匹配。正則表達式 /\/article\/(\d+)/ 匹配 /article/ 后面的數字，即文章 ID。如果匹配成功，則返回第一個捕獲組中的數字，即文章 ID；否則返回 null。

兩種方法各有優劣，需要根據具體情況選擇。第一種方法方便規范，適合大型應用；第二種方法靈活易用，適合個人小應用。