VueRouter笔记 - 路由传参中query和params的区别

query和params的区别

目录

• query和params的区别
  • 1. 书写方式不同
  • 2. 对path的支持
  • 3. url的显示与参数保存

1. 书写方式不同

• query

  <router-link :to="{ name: 'thisIsAName', query: { id:'1234'，age:'12' }}"/>
  

  配置路由

  {
  path: '/user',
  name: 'thisIsAName',
  component: User
  }
  

• params

  <router-link :to="{ name: 'user', params: { id:'1234',age:'12' }}"/>
  

  配置路由

  {
  path:'/User/:id/:age',	//必须提前书写占位符
  name:'user',
  component:User
  }
  

2. 对path的支持

• query

  支持以path形式设置路由

  <router-link :to="{ path: '/user', query: { id:'1234',age:'12' }}"/>
  

  配置路由

  {
  path: '/user', 
  name: 'anyway',
  component: User
  }
  

  当然，同时也支持name形式设置路由，见例1

• params

  只支持以name形式设置路由，如果使用path形式设置，会直接忽略掉传递的参数

  <router-link :to="{ name: 'user', params: { id:'1234',age:'12' }}"/>
  

  配置路由

  {
  path:'/User/:id/:age',	//必须提前书写占位符
  name:'user',
  component:User
  }
  

3. url的显示与参数保存

以上面写的代码为例

• query
  • 以name形式配置路由：http://localhost:8080/#/thisIsAName?id=1234&age=12
  • 以path形式配置路由：http://localhost:8080/#/user?id=1234&age=12
• params
  • 以name形式配置路由：http://localhost:8080/#/user/1234/12
• 通过params传递的参数，页面刷新一次就会消失，而query不会