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?

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
    });
  }
}
Menu