关于vue框架的组件通信问题

Question

在进行一个组件传值不是很多的项目，想了解一下什么方法比较适合目前项目的使用，因为对vue传值这块不是很了解所以想提问看看大佬们的思路。

红色框中的部分是一级路由，蓝色框中的是跳转到二级路由，想要把蓝色框中的数据传递到二级路由的界面。二级路由如下图，有三个界面都需要该数据。

尝试了一下bus方法，一级路由界面方法

handleSeeSetails(row) {
    this.$router.push('/layout/secondMenu/dynamicMonitoring')
    this.$bus.emit('add-todo', {row: row});
},

二级路由‘动态监察’界面接收该数据。但是第一次跳转路由后无法获得数据，得重新返回一级路由再跳转一次到该界面才可以接收到‘row’数据。而且这么写在二级路由其他两个界面无法获取到传递的值。想请大佬帮忙看看需要怎么改，非常谢谢。

created() {
    this.$bus.on('add-todo', this.addTodo)
},

beforedestroy() {
    this.$bus.off('add-todo',this.addTodo)
},
methods: {
    addTodo(row) {
        this.list = row;
        console.log(this.list)
    }
},

Answer 1

• 利用vue-router进行传参,推荐使用下面这种形式

this.$router.push({
    name: '路由名称',
    params: {
    //需要传递的参数
    }
})
// 页面接受参数
this.$route.params

params也可以换成query，只不过是一个在地址栏中显示，一个不在地址栏显示

Answer 2

路由传参呗，params或者query

Answer 3

vuex吧 如果不希望重新请求直接把item整个传过去的话 不然直接路由传参带个id过去重新请求
还是直接写成父子组件传参比较方便 而不是分路由 切换tab把该tab的数据传给父组件，父组件通过prop传给下一个tab组件