Vue Router 是 Vue.js 官方的路由管理器。它與 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。其中一個很重要的功能是：傳遞和獲取參數。

當我們使用 Vue Router 時，可能會需要從 URL 中獲取一些參數，比如從網址 /user/123 獲取到用戶 ID，或者從 /search?keyword=vue 獲取到搜索關鍵字。

為了理解如何從 URL 中獲取參數，我們需要明白 Vue Router 中三個主要概念之間的關系：路由、組件和參數。

路由是指 URL 中的路徑，組件是指 Vue.js 組件，參數是指 URL 中的參數。

比如，在定義路由時我們可以這樣寫：

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

這里的路徑 /user/:id 中，:id 就是參數。在 User 組件中我們可以通過 $route.params.id 來獲取這個參數。

如果我們在 URL 中輸入 /user/123，那么在 User 組件中，$route.params.id 就等于 123。

如果路由定義中的參數有多個，我們可以把它們放到一個對象中：

const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User },
{ path: '/post/:postId/comment/:commentId', component: Comment }
]
})

在 Comment 組件中，我們可以通過 $route.params.postId 和 $route.params.commentId 來獲取兩個參數。

除了路由定義中的參數，我們還可以通過查詢字符串來傳遞參數。查詢字符串是指 URL 中問號之后的部分，比如 /search?keyword=vue 中的 keyword 參數。

查詢字符串中的參數可以使用 $route.query 對象來獲取：

const router = new VueRouter({
routes: [
{ path: '/search', component: Search }
]
})
// in Search component
mounted() {
console.log(this.$route.query.keyword) // output: 'vue'
}

在上面的例子中，當我們訪問 /search?keyword=vue 時，在 Search 組件中可以通過 this.$route.query.keyword 來獲取 keyword 參數。

如果查詢字符串中有多個參數，我們可以像這樣獲取它們：

mounted() {
const { keyword, type } = this.$route.query
console.log(keyword, type) // output: 'vue', 'blog'
}

以上就是關于 Vue Router 如何取參數的詳細介紹。在實際場景中，參數的傳遞和獲取是非常常見的需求，熟悉這些技巧可以幫助我們更好地使用 Vue Router 來開發單頁面應用。