query 和 params 传参的区别

通过 url 传递参数控制页面显示数据的两种方式

1. query 传统问号传参

• url 格式：xxx.com/product?id=123

• 模板内获取数据：this.$route.query.id

2. params 动态路由匹配

• url 格式：xxx.com/product/123

• 模板内获取数据：this.$route.params.id

• 注意这个方式参数字段名 id 要在路由配置中定义 用冒号的形式标记

• 参数可以继续拼接 /student/:id/:name/:age/:address

• 他必须严格按照 url 的配置格式访问

3. 如何选择哪一个传参方式

两个并没有高低之分

• 动态路由, 优点 ,好看整齐 缺点 必须预先定义, 如果参数多起来多起来不好管控

• 问号的形式 灵活随意想改就改, 想加就加, 缺点就是太丑陋了, 也不直观

  params：/router1/:id ，    //router1/123，/router1/789 ,这里的id叫做params
  query：/router1?id=123 ,  //router1?id=456 ,这里的id叫做query。

query  传参配置的是 path，而 params 传参配置的是 name，在 params 中配置 path 无效

query 在路由配置不需要设置参数，而 params 必须设置

query 传递的参数会显示在地址栏中

params 传参刷新会无效，但是 query 会保存传递过来的值，刷新不变  ;

接收参数使用 this.$router 后面就是搭配路由的名称就能获取到参数的值

//query:
  {
  path: '/home',
  name: Home,
  component: Home
  }

 // params:
  {
  path: '/home/:id',
  name: Home,
  component: Home
  }