路由傳參和獲取參數在前端開發中是一個常見的需求，特別是在使用如 Vue.js、React 等前端框架時。下面，我將以 Vue.js 為例，介紹三種常見的路由傳參和獲取參數的方式：

1. 使用?params?傳參

傳參：

在路由配置中，你需要為路由設置一個動態部分，通常使用?:id?這樣的形式。

// router/index.js
const router = new VueRouter({
routes: [
{
path: '/user/:id', // 動態路由參數
name: 'User',
component: User
}
]
})

在組件中，你可以使用?this.$router.push?來傳遞參數。

// 在某個方法中
this.$router.push({ name: 'User', params: { id: 123 } })

獲取參數：

在目標組件中，你可以通過?this.$route.params?來獲取傳遞的參數。

// User.vue
export default {
mounted() {
const userId = this.$route.params.id; // 獲取傳遞的 id 參數
console.log(userId); // 輸出：123
}
}

2. 使用?query?傳參

傳參：

你可以直接在 URL 后面添加查詢參數。

// 在某個方法中
this.$router.push({ path: '/user', query: { name: 'John' } })

這將生成 URL?/user?name=John。

獲取參數：

在目標組件中，你可以通過?this.$route.query?來獲取查詢參數。

// User.vue
export default {
mounted() {
const userName = this.$route.query.name; // 獲取傳遞的 name 參數
console.log(userName); // 輸出：John
}
}

3. 使用 Vuex 或其他狀態管理庫

雖然 Vuex 或其他狀態管理庫不是直接用于路由傳參的，但它們可以在全局范圍內管理應用的狀態，因此可以間接地實現參數傳遞。

傳參：

你可以在一個組件中通過 mutation 或 action 來改變 Vuex store 中的狀態。

// 在某個方法中
this.$store.commit('SET_USER_ID', 123);

獲取參數：

在另一個組件中，你可以直接從 Vuex store 中獲取這個狀態。

javascript// User.vue
computed: {
userId() {
return this.$store.state.userId; // 假設你在 Vuex 中定義了 userId 狀態
}
}

然后你可以在模板或其他地方使用?this.userId?來訪問這個值。

請注意，使用 Vuex 或其他狀態管理庫進行參數傳遞通常適用于更復雜的應用場景，其中組件之間的通信和狀態共享是一個核心需求。對于簡單的路由參數傳遞，使用?params?或?query?通常就足夠了。