在Vue.js框架中，页面跳转并传递数据是一个常见的操作。通常情况下，我们可以通过两种主要方式实现Vue中的跳转传值：使用`router.push`方法或者通过路由的`params`和`query`。
使用`router.push`方法传值
当你需要导航到不同的路由，并传递一些参数时，可以使用`router.push`方法。
例子：传递params
假设你有一个用户详情页，需要在点击用户列表中的用户时，跳转到用户详情页并传递用户ID。
// 在 Vue 实例中
this.$router.push({
name: 'userDetail', // 路由名称
params: {
userId: 123 // 需要传递的值
}
});
在目标路由（用户详情页）中，你可以在`$route.params`中访问到这个值。
例子：传递query
如果你想要通过URL的查询字符串传递数据，可以使用`query`。
this.$router.push({
path: '/user', // 这里使用path而不是name
query: {
userId: 123 // 查询参数
}
});
在目标页面中，通过`$route.query`可以获取到传递的值。
在路由定义时使用props传值
在Vue Router 4中，可以通过路由的props属性来接收参数。
// 路由配置
const routes = [
{
path: '/user/:userId',
component: UserDetail,
props: true // 开启props传值
}
];
在组件内部，你可以直接在`props`中声明接收这些参数。
// UserDetail 组件
export default {
props: ['userId'],
// ...
};
注意事项：
1. `params`和`query`的主要区别在于，`params`是路由的一部分，通常用于表示必须的参数，而`query`更像是在页面间传递的可选参数，不会影响路由的匹配。
2. 使用`params`传值时，如果路由是动态的，需要在路由定义时使用冒号`:`标记参数。
3. 如果要传递的值是对象或者数组，建议使用`query`，因为`params`通常不支持非字符串值。
总结
Vue中的页面跳转传值方式多样，使用`params`和`query`可以灵活地在路由之间传递数据。根据不同的场景选择合适的方法，可以使得代码结构更清晰，维护起来也更加方便。在实际的项目开发中，合理利用这些传值方式，可以有效地提高开发效率和用户体验。