query传参和params传参的区别

query传参和params传参的区别

query传参

  使用 this.$router.push({path: ‘/’, query: {参数名: ‘参数值’})

​ 传递：

this.$router.push({
        name: 'HelloWorld',
        path: "/HelloWorld",
        query: {
          name: this.loginform.name,
        },
      });

​ 接收：

cosnt name = this.$route.query.name

params传参

  使用 this.$router.push({path: ‘/’, name: ‘’, params: {参数名: ‘参数值’})

​ 传递：

this.$router.push({
        name: 'HelloWorld2',
        path: "/HelloWorld2",
        params: {
          name: this.loginform.name,
        },
      });

​ 接收：

cosnt name = this.$route.params.name

两者的区别

• query可以通过name属性或者path属性来引入路由，而params只能通过name属性来引入路由；在使用params传递时如果指定了path属性而没有name属性，那么界面能成功跳转但是不能接受到传递过来的参数
• query传递参数时会地址栏会发生改变，传递参数会携带在路径中，而params则不会
• 在刷新界面时，query传递的参数不会丢失，而params会丢失

顺带一提vue-router的routes中name属性的作用

  平常在定义路由时都会有一个name属性，通常不去定义这个属性发现也没有任何问题，但是name属性还是有以下作用的

通过name属性，为一个页面中不同的router-view渲染不同的组件

<template>
  <div id="app">
     <router-view></router-view>
     <router-view  name="Hello"></router-view> 
     <router-view  name="text"></router-view>   
  </div>
</template>

可以用name传参 使用$route.name获取当前组件name值

 <template>
  <div id="app">
      // 当前组件的name值
    <p>{{ $route.name }}</p> 
    <router-view></router-view>
  </div>
</template>

作为传参时的路由，如上所示

总结：

  需要特别注意两种传递方式的区别，通俗的讲，query类似axios中get，而params则类似post，但是需要记得 params传递参数一定要去指定一下name属性，否则会接受不到传递的参数