About passing values between pages of vue,$router

problem description

A new one is cute. Now when we practice VUE, we will encounter the problem of passing values between pages, using the method of passing values through $router

give me a chestnut

A page passes
this.$router.push ({path:"/adminManage",query: {usn:result.data}})

B page acquisition (search method used)
post a link
https://blog.csdn.net/hanxion...

created:function(){ 
    this.getParams();
},
watch: { 
// ,
      "$route": "getParams"
},
methods:{ 
    getParams:function(){ // 
        var routerParams = this.$route.query.nameId // 
    console.log("=="+routerParams) 
    this.textareText = routerParams 
    },
}

later I tried to assign values directly in data of B page

data(){
        return{
            role:this.$route.query.usn.role
        }
    },

found that it is fine without listening, but in line with the idea that the boss"s method is probably better than his own, I would like to ask you: what is wrong with my practice

cheeky

ask the bosses to advise you about the scenarios in which the page passes the value of $router,eventBus and Storage