如何獲取Vue路由query？在許多應用中，我們需要從URL中動態獲取參數以便我們可以在組件中使用它。這些參數可以包含在查詢字符串中。我們可以使用Vue Router的$route對象來獲取查詢參數。

// 實例化Vue Router
const router = new VueRouter({
routes: [
{
path: '/search',
name: 'search',
component: SearchResults
}
]
})
// 獲取查詢字符串
const searchQuery = this.$route.query.query

在上面的代碼中，我們將路由器實例化并創建一個路由對象/搜索。SearchResults組件可以使用查詢參數作為組件的props。

// 使用查詢參數作為組件的props
{
path: '/search',
name: 'search',
component: SearchResults,
props: (route) =>({ query: route.query.query })
}

在上面的代碼中，我們使用prop選項將查詢參數傳遞給SearchResults組件。我們使用箭頭函數來返回一個對象，在這個對象中我們將查詢參數作為名為“ query” 的屬性傳遞。

如果路由沒有查詢參數，我們可以使用默認值：

// 添加默認值
{
path: '/search',
name: 'search',
component: SearchResults,
props: (route) =>({
query: route.query.query || 'default query'
})
}

在上面的代碼中，如果沒有查詢參數，我們將使用默認值“default query”。

我們還可以在組件中使用$router屬性來生成帶有查詢參數的URL：

// 生成帶有查詢參數的URL
this.$router.push({
name: 'search',
query: { query: this.query }
})

在上面的代碼中，我們使用$router的push方法將新的路徑添加到路由器。我們使用name選項指定路由，然后使用query選項傳遞查詢參數。

如果我們想要在URL中保留現有的查詢參數，我們可以將新查詢參數與現有的查詢參數合并：

// 合并查詢參數
this.$router.push({
name: 'search',
query: Object.assign({}, this.$route.query, { page: 2 })
})

在上面的代碼中，我們使用Object.assign()方法將兩個對象合并。第一個對象是現有的查詢參數，第二個對象是新的查詢參數。

獲取Vue路由query非常容易，并且在許多應用程序中都是必需的。使用上面的代碼，您可以輕松地從URL中動態獲取查詢參數。