vue-router 使用query传参跳转了两次（首次带参数，跳转到了不带参数）

Question

路由配置：

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

从详情页跳转：

<router-link :to="{name:'proComment',query:{id:proDetilDate.id}}">
    <span style="float: right">共{{proDetilDate.comment.amount}}条点评 &gt;</span>
</router-link>

地址栏变化过程为：

#/proDetail/6 -> /#/proComment

导致在proComment页获取不到query值，但params就没问题

返回上一页时，地址栏变为 '/#/proComment?id=6' 再点一次才会变为 '#/proDetail/6'

请大家看下是什么原因导致的呢？

Answer 1

路由配置里的query是没必要的，先去掉看看。query参数自动以问号形式带在后面，params参数则是直接跟在地址斜线后面。

Answer 2

找到原因了
底部导航加了router监听，根据model值跳转到对应路由时，没有传参过去

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