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

當(dāng)我們使用 Vue Router 時(shí)，可能會(huì)需要從 URL 中獲取一些參數(shù)，比如從網(wǎng)址 /user/123 獲取到用戶 ID，或者從 /search?keyword=vue 獲取到搜索關(guān)鍵字。

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

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

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

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

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

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

如果路由定義中的參數(shù)有多個(gè)，我們可以把它們放到一個(gè)對(duì)象中：

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

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

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

查詢字符串中的參數(shù)可以使用 $route.query 對(duì)象來獲取：

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

在上面的例子中，當(dāng)我們?cè)L問 /search?keyword=vue 時(shí)，在 Search 組件中可以通過 this.$route.query.keyword 來獲取 keyword 參數(shù)。

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

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

以上就是關(guān)于 Vue Router 如何取參數(shù)的詳細(xì)介紹。在實(shí)際場(chǎng)景中，參數(shù)的傳遞和獲取是非常常見的需求，熟悉這些技巧可以幫助我們更好地使用 Vue Router 來開發(fā)單頁面應(yīng)用。