用vue搭建整个前端页面，需要实现一个信息列表的显示，当点击某一项时，跳转到另外一个页面显示具体的信息详情。那么像这种兄弟之间的页面如何传递参呢？

我们都知道在 Vue.js 的项目中，如果项目结构简单，父子组件之间的数据传递可以使用  props 或者$emit 等方式。

那么我就可以先将A子组件将数据传递到父组件，然后父组件在传递给B子组件，这样传递肯定是没问题的，但是这样写下来就变得复杂了。

下面看一下简单的传递方式

一.页面跳转通过路由带参数传递数据(假设A要传递参数id到页面B   且B的路由是path和name都为 ‘AgentMsg’ )

// 1.A页面中的代码
this.$router.push({{name: "AgentMsg"}, params: {id: id}})或者通过this.$router.push({{path: "AgentMsg"},  query: {id: id}})
// 2.B页面的路由信息
 {
   path: "AgentMsg",
   name: "AgentMsg",
   component: AgentMsg
}
// 3.B页面中的代码
 let id = this.$route.params.id  和 A页面中的  params和query保持一致

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 1 7

通过query传递参数，页面刷新后，数据不会消失。但是params刷新后会消失。