Vue 中Router 的params和query传参的使用和区别

首先简单来说明一下$router和$route的区别

//$router : 是路由操作对象，只写对象,跳转传参
//$route : 路由信息对象，只读对象，接收传递参数

//操作 路由跳转
this.$router.push({
      name:'demo1',
      params:{
          name:'li',
          age:'23'
     }
})

//读取 路由参数接收
this.name = this.$route.params.name;
this.age = this.$route.params.age;

或者
//操作 路由跳转
this.$router.push({
      name:'demo1',
      query:{
          name:'wang',
          age:'26'
     }
})

//读取 路由参数接收
this.name = this.$route.query.name;
this.age = this.$route.query.age;

 

1.params传递参数

注：使用params传参只能使用name进行引入

• 使用params传参

//params传参 使用name
todemo() {
  this.$router.push({
     name: 'demo',
     params: {
        id: '123'
     }
  });
}

//params接收参数

console.log(this.$route.params.id);

//路由

{
path: '/demo/:id',
name: 'demo',
component: () => import('@/pages/demo')
}

 

 

2·query传递参数

// query 传递参数
todemo() {
      this.$router.push({
        name: 'demo',
        query: {
          id: '123'
        }
      });
    }

// 接收参数
console.log(this.$route.params.id);

params和query的区别？

vue 中router传参可以使用params和query两种方式。
1、使用params传参只能用name来引入路由，即push里面只能是name:’xxxx’,不能是path:’/xxx’,因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！。 params传参跳转后，接收的参数不显示在路由上，如果用户刷新页面，参数消失，如果想刷新保留参数，需要配合路由使用，将params当成路由的一部分，在路由后面添加参数名，就可以保证params参数接收时，用户刷新页面参数就不会消失。
 2、使用query传参，可以用path或者name来引入路由。 query是拼接在url后面的参数，没有传参也可以正常显示页面。 二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示，如果params和路由结合使用就可以在地址栏看到参数了。