vue router ，使用query和params传参的区别

注意事项：

• params只能用name的方式传参，query 可以用name ,也可以是 path
• 使用params传参的时候，在router中，作为接收参数****的那个路由，要加上参数名，否则刷新页面的时候，该方式传递的参数会丢失。
• 在前端里面，router怎么发送的就怎么收
  query发送的就用this.$route.query接收
  params发送的就用this.$route.params接收

在components下建了一个test文件夹，文件夹下有两个vue文件,receive.vue和transfer.vue；

第一种，name,params路由跳转传参，地址栏不显示所传的参数，router中不配置参数,刷新页面后，所传参数参数会丢失。——（刷新页面会有问题）

receive.vue

<template>
    <div class="transfer-bg">
        <h2>接收的参数：{{this.$route.params}}</h2>
    </div>
</template>

transfer.vue

<template>
    <div class="transfer-bg">
       <el-button @click="handelerTransfer">点击传参</el-button>
    </div>
</template>
<script>
export default {
  name: 'transfer',
  methods: {
    handelerTransfer () {
        /* 该name的名字与router.js中定义的路由的name必须一致，但此时的router.js中该路由的path可以随意定义  */
      this.$router.push({ name: 'receive', params: { aid: 'sssssss', status: 1 } }) 
     
    }
  }
}
</script>

router.js

 import Vue from "vue";
 import Router from "vue-router";
 Vue.use(Router);
 
 export default new Router({
 mode:'history',
 routes:[
    {
          path: '/transfer',  // *** 测试的时候，从这个路由跳转过去
          name: 'transfer',
          component: () => import('@/components/test/transfer.vue')
       },
       {
          path: '/receive', // *** 这个是接收参数的路由，这里的path此时可以随意定义
          name: 'receive', // *** 这里必须与路由跳转处的name一致，
          component: () => import('@/components/test/receive.vue')
      }   
 ]
 })    

① transfer路由，页面效果：

② 跳转到receive的效果：（参数不表现地址栏）

③ 刷新页面后：（ 参数丢失了 ）

第二种，name,params路由跳转传参，地址栏会显示所传的参数，router中配置参数,刷新页面后，所传参数仍然存在。————（正解，可取）

receive.vue 和transfer.vue 与第一种相同，不做改变。

receive.vue ( 这里的必须由this.$route.params接收参数 )

<template>
    <div class="transfer-bg">
        <h2>接收的参数：{{this.$route.params}}</h2>
    </div>
</template>

transfer.vue

<template>
    <div class="transfer-bg">
       <el-button @click="handelerTransfer">点击传参</el-button>
    </div>
</template>
<script>
export default {
  name: 'transfer',
  methods: {
    handelerTransfer () {
        /* 该name的名字与router.js中定义的路由的name必须一致，但此时的router.js中该路由的path可以随意定义  */
      this.$router.push({ name: 'receive', params: { aid: 'sssssss', status: 1 } }) 
     
    }
  }
}
</script>

router.js

 import Vue from "vue";
 import Router from "vue-router";
 Vue.use(Router);
 
 export default new Router({
 mode:'history',
 routes:[
    {
          path: '/transfer',  // *** 测试的时候，从这个路由跳转过去
          name: 'transfer',
          component: () => import('@/components/test/transfer.vue')
       },
       {
          path: '/receive/:aid/:status', // *** 这个是接收参数的路由，在这里对要接收params传参的路由,加参数名，这里的aid就是参数名 ，status也是，且名字与路由跳转的时候带的参数名 必须保持一致;但是参数前面的 的那个" receive "可以随意定义,可以换成其他名字
          name: 'receive', // 这里必须与路由跳转处的name一致，
          component: () => import('@/components/test/receive.vue')
      }   
 ]
 })    

① transfer路由，页面效果：

② 跳转到receive的效果：（参数值 ， 表现在了地址栏）

③ 刷新页面后：( 参数仍然存在 )

第三种，path ,query 路由跳转传参，地址栏显示所传的参数，刷新页面后，所传参数仍然存在。——（正解，可取）

receive.vue ( 接收参数必须是this.$route.query接收 )

<template>
    <div class="transfer-bg">
        <h2>接收的参数：{{this.$route.query}}</h2>  
    </div>
</template>

transfer.vue

<template>
    <div class="transfer-bg">
      <h2>从这个tarnsfer路由跳转过去</h2>
       <el-button @click="handelerTransfer">点击传参</el-button>
    </div>
</template>
<script>
export default {
  name: 'transfer',
  methods: {
    handelerTransfer () {
      this.$router.push({ path: '/receive', query: { aid: 'sssssss', status: 1 } }) ; // *** query方式发送  ；这里的path  必须和router.js文件中的path保持一致；
    }
  }
}
</script>

router.js

 import Vue from "vue";
 import Router from "vue-router";
 Vue.use(Router);
 
 export default new Router({
 mode:'history',
 routes:[
    {
          path: '/transfer',  // *** 测试的时候，从这个路由跳转过去
          name: 'transfer',
          component: () => import('@/components/test/transfer.vue')
       },
       {
          path: '/receive', // ***  这个是接收参数的路由，这里必须与路由跳转处的path 名 一致
          name: 'receive', // ***  这里的name可以随意定义
          component: () => import('@/components/test/receive.vue')
      }   
 ]
 })    

① transfer路由，页面效果：

② 跳转到receive的效果：（参数表现在了地址栏，和params传参方式，在路由中配置了参数时有所不同。）

③ 刷新页面后：( 参数仍然存在 )

第四种，name,query 路由跳转传参，地址栏显示所传的参数，router中不配置参数,刷新页面后，所传参数参数仍然存在。——（正解，可取）

receive.vue ( 接收参数必须是this.$route.query接收 )

<template>
    <div class="transfer-bg">
        <h2>接收的参数：{{this.$route.query}}</h2>  
    </div>
</template>

transfer.vue

<template>
    <div class="transfer-bg">
      <h2>从这个tarnsfer路由跳转过去</h2>
       <el-button @click="handelerTransfer">点击传参</el-button>
    </div>
</template>
<script>
export default {
  name: 'transfer',
  methods: {
    handelerTransfer () {
      this.$router.push({ name: 'receive', query: { aid: 'sssssss', status: 1 } }) // *** query方式发送   ； 这里的name  必须和router.js文件中的 name 保持一致；
    }
  }
}
</script>

router.js

import Vue from "vue";
 import Router from "vue-router";
 Vue.use(Router);
 
 export default new Router({
 mode:'history',
 routes:[
    {
          path: '/transfer',  // *** 测试的时候，从这个路由跳转过去
          name: 'transfer',
          component: () => import('@/components/test/transfer.vue')
       },
       {
          path: '/receive', // ***  这个是接收参数的路由，path可以任意定义。
          name: 'receive', // ***  这里的name这里必须与路由跳转处的name一致
          component: () => import('@/components/test/receive.vue')
      }   
 ]
 })

① transfer路由，页面效果：

② 跳转到receive的效果：（参数表现在了地址栏，和params传参方式【 在路由中配置了参数时 】有所不同。）

③ 刷新页面后：( 参数仍然存在 )

总结：

1. **params**只能用**name的方式传参，并且作为接收路由参数的那个路由**，在**router.js**中必须****配置相应的参数，否则将存在参数丢失的问题；

2. query 可以用**name** ,也可以用 path，在表现形式上，两者并无较大区别，但是需要注 意两者在**router.js中的name和path**名，要相对应。

3. 在前端里面，router怎么发送的就怎么收
   **query发送的就用this.$route.query**接收
   **params发送的就用this.$route.params**接收

   博客参考：https://juejin.im/post/5d0c9a2d6fb9a07efc499082 和https://juejin.im/post/5a07ff97f265da430944a411