在Vue.js中，路由與導航不僅涉及到頁面之間的切換，還包括了向頁面傳遞參數以及獲取查詢參數的功能。本文將詳細介紹如何在Vue Router中傳遞路由參數和查詢參數，幫助您更好地理解和使用這些功能。

路由參數的傳遞

路由參數是指在URL中的動態片段，例如在用戶詳情頁中傳遞用戶ID。Vue Router允許您在路由規則中定義路由參數，然后在組件中獲取和使用它們。

配置路由規則

首先，在路由規則中定義路由參數。例如，我們想要一個動態的用戶詳情頁，可以這樣配置路由規則：

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

在組件中獲取參數

在組件中，您可以通過$route.params來獲取路由參數。

<template><div><h2>User ID: {{ $route.params.id }}</h2></div>
</template>

在上面的例子中，$route.params.id會獲取到路由中的id參數。

查詢參數的傳遞

查詢參數是附加在URL后面的鍵值對，例如在搜索頁中傳遞關鍵詞。Vue Router允許您在導航鏈接中傳遞查詢參數，并在組件中獲取它們。

使用 <router-link> 傳遞查詢參數

要傳遞查詢參數，可以在<router-link>中使用to對象來指定查詢參數。

<template><div><router-link :to="{ path: '/search', query: { keyword: 'vue' }}">搜索 Vue</router-link></div>
</template>

在組件中獲取查詢參數

在組件中，您可以通過$route.query來獲取查詢參數。

<template><div><h2>搜索關鍵詞: {{ $route.query.keyword }}</h2></div>
</template>

在上面的例子中，$route.query.keyword會獲取到查詢參數中的keyword。

動態路由參數 vs 查詢參數

動態路由參數適用于在URL中直接顯式地傳遞參數，適用于頁面間的導航。查詢參數適用于在URL后面傳遞鍵值對，適用于搜索、過濾等場景。

在Vue.js中，路由與導航不僅涉及頁面切換，還包括了向頁面傳遞參數和獲取查詢參數。通過在路由規則中定義路由參數和在導航鏈接中傳遞查詢參數，您可以在不同的頁面間傳遞信息，實現更多交互和定制化功能。無論是動態路由參數還是查詢參數，都是Vue Router提供的強大特性，可以幫助您構建出更具動態性和用戶友好性的單頁應用程序。