路由传参和获取参数的三种方式

路由传参和获取参数在前端开发中是一个常见的需求，特别是在使用如 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 通常就足够了。