Vue router-link路由不一樣的寫法，不同的效果

我想要的路徑：http://localhost:8080/#/main/hato/realtime/eventDetail/238

狀況一：未進行路由配置：

 {

     path: ' eventDetail',

     name: ' eventDetail',

     component: () => import('@/views/security/alarm-management/ eventDetail')

}

狀況二：已進行路由配置

 {

     path: ' eventDetail/:id',

     name: ' eventDetail',

     component: () => import('@/views/security/alarm-management/ eventDetail')

}

在狀況一下：

路由用 name和params 
路由跳轉：http://localhost:8080/#/main/hato/realtime/eventDetail 

路由用path和query
路由跳轉：http://localhost:8080/#/main/hato/realtime/eventDetail?id=238

const showButton = {

  props: ["scope"],

  render: function(h) {

    return (

      <div>

        <router-link to={{name: " eventDetail", params: {id: this.scope.row.id}}}>

          查看詳情

        </router-link>

      </div>

    );

  }

};

在狀況二下：

路由用 name和params 
路由跳轉：http://localhost:8080/#/main/hato/realtime/eventDetail/238

路由用path和query 下面這個路徑很奇怪，因此vue在router.js裏面有個name屬性
路由跳轉：http://localhost:8080/#/main/hato/realtime/eventDetail/:id?id=238

const showButton = {

  props: ["scope"],

  render: function(h) {

    return (

      <div>

        <router-link to={{path: " eventDetail/:id", query: {id: this.scope.row.id}}}>

          查看詳情

        </router-link>

      </div>

    );

  }

};

總結：query要用path來引入，params要用name來引入