vue-router 中使用path与query，传递的参数在接收时却在params中

Question

router-link使用path与query，传递的参数在接收时却在params中,代码如下：

<router-link :to="{path: '/detail', query: {id: article.id}}">阅读更多 ></router-link>

接收时的打印console.log(this.$route)，如下图：

下面是路由注册的代码：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/index/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/archive',
      name: 'archive',
      component: () => import(/* webpackChunkName: "archive" */ '@/views/archive/archive.vue')
    },
    {
      path: '/detail',
      name: 'detail',
      component: () => import(/* webpackChunkName: "articleDetail" */ '@/views/articleDetail/articleDetail.vue')
    }
  ]
})

不管是换成name与params还是path与query，接收参数时都在params中；之前我的理解是name必须与params使用，path必须与query使用；难道我的理解是错的吗？

Answer 1

...
 {
      path: '/detail/:id',
      name: 'detail',
      component: ... 
 }

Answer 2

使用 path 和 query 是因为需要 query 作为查询参数，在路径中显示；
使用 name 和 params 是不需要查询参数，仅仅需要路由间传递参数。
这两种方式都是为了传递参数保留在 router 对象里，而 router 用来保存路由参数的 params 属性是路由间所有的传递参数的，包括查询参数。也就是说不管你使用上述哪种传参，都是存在这个 params 属性里，它和 name 一起使用的 params 是不同的东西，path、query、name及与它配合使用的 params相当于是传递给路由对象方法的参数。

Answer 3

this.$router.push({
    name: '',
    query: {
        id: ''
    }
})