一看就会的：params和query传参以及写法的区别

代码钢琴家
264 阅读3分钟

params和query传参的写法上和用法上区别是不同的。我在刚学的过程中经常会分不清楚他们怎么用的，用处干嘛，经常混淆。下面我就给大家带来最详细的写法以及教程，一定能让各位理解透彻。 首先我们知道路由的写法有两种分别是编程式导航和声明式导航两种写法，但是在书写的过程中我们往往需要一个路由的挂载点router-view作为视口标签

代码如下:

<template>
    <div>
      <router-link to="/find">去find组件</router-link>
  
      <!-- 这里就是路由出口的挂载点 -->
      <div class="app">
        <router-view></router-view>
      </div>
  </div>

声明式导航：

它是由router-link标签进行编写，其中的to属性就是指代要去的哪个路由路径,其实他类似与THML中a标签中的href属性。

代码如下：

这是find组件

 <template>
  <div>
    <div class="footer_wrap">
    <router-link to="/find">去find组件</router-link>

路由页面 find组件

<template>
    <div>
        find页面
    </div>
</template>

最终的效果 通过点击route-link跳转到了route组件。

image.png

再次基础上我们对其进行传参操作，?传参也就是query传参，name和age就是传递的参数通过&符拼接

<template>
    <div>
      <router-link to="/find?name=JayChou&age=20">去find组件</router-link>

      <!-- 这里就是路由出口的挂载点 -->
      <div class="app">
        <router-view></router-view>
      </div>
  </div>

路由组件接收参数，接收参数用$route.query来接收

<template>
    <div>
        <p>我是传递过来的参数1：{{this.$route.query.name}}</p>
        <p>我是传递过来的参数2：{{this.$route.query.age}}</p>
    </div>
</template>

最终显示结果

image.png

我们可以发现这就是query传参的特点之一,他会在地址栏显示出来。通过刷新你也会发现它会一直在页面中显示,会有缓存，各位小伙伴们可以自己去尝试一下。

之前的是第一种写法，声明式导航还有第二种写法,to属性通过v-bind动态绑定，达到的最终效果是一样的在这里我就不展示了。需要注意的一点就是query传参在绑定路径的时候需要与 path进行绑定

  <template>
    <div>
      <router-link :to="{path:'/find',query:{name:'Esony',age:18}}">去find组件</router-link>
      <!-- 这里就是路由出口的挂载点 -->
      <div class="app">
        <router-view></router-view>
      </div>
  </div>

接下来我们开始第二种方式params传参，同样我们用声明式导航的方式先书写一遍 ，拼接的时候我们需要注意的一点是首先需要在路由匹配规则里面写好匹配说明。匹配的格式是/路由/：参数1/：参数2。

    path:'/find',
    name:'find',
    component:find

点击router-link实现路由跳转

 <template>
    <div>
      <router-link :to="{name:'find',params:{username:'藤原拓海',car:'AE86'}}">去find组件</router-link>

接收参数用$route.params来接收

 <template>
    <div>
        <p>我是传递过来的参数1：{{this.$route.params.username}}</p>
        <p>我是传递过来的参数2：{{this.$route.params.car}}</p>
    </div>
</template>

接收画面

image.png

这就是params传参的特点之一，不会再地址栏中显示参数，同时刷新页面过后参数就会消失，再做项目的时候，我们经常会携带参数进行路由跳转，有时候在页面刷新得过程中我们会遇到页面刷白得情况，就是这个问题啦，在使用的过程中我们通常结合本地缓存进行路由跳转。当然啦也不是说params的参数一定不会在地址栏显示

在路由匹配规则中稍作修改,对路由进行拼接

    path:'/find/:username/:car',
    name:'find',
    component:find

接收画面,就显示出来了

image.png

同样你也可以不动态绑定,注意这里直接/传参，不用跟query中的？和&拼接，展示的效果和上面是一样的

    <router-link to="/find/藤原拓海/AE86">去find组件</router-link>

讲完声明式导航，我们现在来讲讲编程式导航。

我们通过点击按钮触发点击事件params，然后通过this.$router.push进行路由的参数传递以及路由页面的跳转

   <button @click="params">params传参</button>
     
   methods: {
    params(){
      this.$router.push({
        name:'find',
        params:{
          username:'藤原拓海',
          car:'AE86'
        }
      })
    }
  }

最终得到的效果是，可能有小伙伴会问为什么地址栏里面没有显示参数拼接,关于这个问题在上面我已经回答过就不做过多的解释。自己网上翻阅就可以知道啦。

image.png

query的编程式导航也是同理

    <button @click="query">query传参</button>
    
     methods: {
    params(){
      this.$router.push({
        name:'find',
        params:{
          username:'藤原拓海',
          car:'AE86'
        }
      })
    }
  },

image.png

讲到这里大概我们讲述的东西完结啦。现在来做一下总结

qeuery和params的区别在哪里

  1. 传参的方式不同 query通过?和&拼接 params通过/拼接

2 query会在地址栏中显示 params虽然也会在地址栏中显示，但是需要在路由匹配规则里面去定义定义方式为 路由名称/：参数1/：参数2

  1. query在页面刷新的时候仍然会保留参数 params在刷新的时候参数会丢失通常要结合本地储存使用
avatar
文章
阅读
粉丝