在 Vue 3 中，使用 vue-router 傳遞路由參數是非常常見的需求。

1. 使用動態路由參數（params）

動態路由參數是定義在路由規則中的占位符部分，例如 /user/:id。你可以通過 router.push 或 <router-link> 傳遞這些參數。

(1) 配置動態路由

import { createRouter, createWebHistory } from 'vue-router';const routes = [{path: '/user/:id', // 動態參數 :idcomponent: () => import('@/views/UserDetail.vue')}
];const router = createRouter({history: createWebHistory(),routes
});export default router;

(2) 通過?router.push?傳遞參數?

import { useRouter } from 'vue-router';export default {setup() {const router = useRouter();const navigateToUser = (userId) => {router.push({ name: 'user', params: { id: userId } }); // 傳遞參數};return { navigateToUser };}
};

(3) 在目標組件中獲取參數

?

import { useRoute } from 'vue-router';export default {setup() {const route = useRoute();const userId = route.params.id; // 獲取動態參數return { userId };}
};

?

2. 使用查詢參數（query）

查詢參數是 URL 中 ? 后面的部分，例如 /search?name=Vue&id=123。你可以通過 router.push 或 <router-link> 傳遞查詢參數。

(1) 通過?router.push?傳遞查詢參數

import { useRouter } from 'vue-router';export default {setup() {const router = useRouter();const navigateToSearch = () => {router.push({path: '/search',query: { name: 'Vue', id: 123 } // 傳遞查詢參數});};return { navigateToSearch };}
};

(2) 在目標組件中獲取查詢參數

import { useRoute } from 'vue-router';export default {setup() {const route = useRoute();const name = route.query.name; // 獲取查詢參數const id = route.query.id;return { name, id };}
};

?3. 使用命名路由（推薦）

如果你的路由配置中定義了 name 屬性，可以通過命名路由傳遞參數，這樣可以避免硬編碼路徑。

(1) 定義命名路由

const routes = [{path: '/user/:id',name: 'user', // 定義路由名稱component: () => import('@/views/UserDetail.vue')}
];

(2) 通過?router.push?使用命名路由傳遞參數

import { useRouter } from 'vue-router';export default {setup() {const router = useRouter();const navigateToUser = (userId) => {router.push({name: 'user', // 使用路由名稱params: { id: userId } // 傳遞動態參數});};return { navigateToUser };}
};

4. 使用?<router-link>?傳遞參數

除了編程式導航（router.push），你還可以通過 <router-link> 傳遞參數。

(1) 傳遞動態參數

<template><router-link :to="{ name: 'user', params: { id: 123 } }">跳轉到用戶詳情頁</router-link>
</template>

(2) 傳遞查詢參數

<template><router-link :to="{ path: '/search', query: { name: 'Vue', id: 123 } }">跳轉到搜索頁</router-link>
</template>

?5. 區分動態參數和查詢參數

類型	位置	示例 URL	獲取方式
動態參數 (params)	路徑中	/user/123	route.params.id
查詢參數 (query)	URL 的???后	/search?name=Vue&id=123	route.query.name

6. 注意事項

1. 動態參數會被移除

   • 如果你在導航時切換了路由，但沒有重新設置動態參數，那么參數會被清除。
   • 解決方法：確保在導航時重新傳遞參數，或者使用?watch?監聽?route.params?的變化。

2. 查詢參數不會被移除

   • 查詢參數會保留在 URL 中，直到你手動清除或覆蓋它們。

3. 強制刷新頁面時丟失參數

   • 如果用戶刷新頁面，動態參數和查詢參數仍然可以從?route.params?和?route.query?中獲取。

7. 完整示例

路由配置

const routes = [{path: '/user/:id',name: 'user',component: () => import('@/views/UserDetail.vue')},{path: '/search',name: 'search',component: () => import('@/views/SearchPage.vue')}
];

導航組件

<template><div><!-- 傳遞動態參數 --><router-link :to="{ name: 'user', params: { id: 123 } }">查看用戶詳情</router-link><!-- 傳遞查詢參數 --><router-link :to="{ path: '/search', query: { name: 'Vue', id: 123 } }">搜索內容</router-link></div>
</template>

接收參數的目標組件

<template><div><p>用戶 ID: {{ userId }}</p><p>查詢參數 Name: {{ name }}</p><p>查詢參數 ID: {{ id }}</p></div>
</template><script>
import { useRoute } from 'vue-router';export default {setup() {const route = useRoute();const userId = route.params.id; // 獲取動態參數const name = route.query.name; // 獲取查詢參數const id = route.query.id;return { userId, name, id };}
};
</script>

總結

• 動態參數：適合用于 URL 中明確標識資源的情況，例如?/user/123。
• 查詢參數：適合用于可選參數或過濾條件，例如?/search?name=Vue&id=123。
• 命名路由：推薦使用命名路由，避免硬編碼路徑。

?

?

?

?

?

?