Vue-router used query to pass parameters to jump twice (for the first time with parameters, jump to no parameters)

routing configuration: 

{
    path: "/proComment",
    name: "proComment",
    query: {
        id: "",
    },
    component: () => import("@/pages/product/comment.vue")
},

Jump from the details page: 

<router-link :to="{name:"proComment",query:{id:proDetilDate.id}}">
    <span style="float: right">{{proDetilDate.comment.amount}} ></span>
</router-link>

the address bar changes as follows: 

-sharp/proDetail/6 -> /-sharp/proComment

causes the query value not to be obtained in the proComment page, but params is fine

when you return to the previous page, the address bar changes to"/-sharp/proComment?id=6" before clicking again will change to"- sharp/proDetail/6"

.

Please take a look at what caused it?

Vue.js vue-router
Aug.23,2021

the query in the routing configuration is not necessary. Take a look at it first. The query parameter is automatically followed by a question mark, while the params parameter is followed directly by the address slash.

found the reason.
router listening is added to the bottom navigation. When you jump to the corresponding route according to the model value, no parameters are passed

. 
watch: {
  $route(to, from) {
    this.selected = to.name;
  },
  selected: function (val, oldVal) {
    this.$router.push({
      name: val
    });
  }
}

Previous: Git clone is very slow under Ubuntu18.04. How do you solve it?

Next: Layer.js error reporting problem, see the diagram for details, has anyone encountered it?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b39be0-2ba05.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b39be0-2ba05.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?