params:

1.params是路由的一部分，因此使用params传参，路由上必须写对应的参数；
2.进行路由跳转的时候要传值，否则会跳转页面失败；
3.params只能使用name来传参；
4.params相当于post请求，参数对用来说是不可见的

  使用：
  this.$router.push {
      name: "home",
      params: {
          id: 8,
          name: "zhangsan"
      }
  }
  
  接收参数：
  this.id = this.$route.params.id
  this.name = this.$route.params.id
  
  路由：
  {
      path: "/home/:id/:name";
      name: "home"
      component: () => import("@/home") 
  
  }
  
  

Query

1.query传参可以使用path,也可以使用name;
2.query相当于get请求，参数拼接在路由的后面；
3.query是拼接在路由后面的，因此有没有没关系；

   使用：
   this.$router.push {
        name: "home",
        query: {
            id: 12,
            name: "lisi"
        }
   }
   
   接收参数：
   this.id = this.$route.query.id;
   this.name = this.$route.query.name
   
   路由：
   {
     path: '/',
     name: "home",
     component: () => import("@/home")
   }

常见应用场景

通常，我们会将分页、搜索等信息放在query里；而点击进如某个列表项目的详情页时，会把项目id以params的形式放在url中。