vue-router中传参

在vue项目中使用vue-router组件后，具有$router，$route两个对象

$router一般用来传递路由信息，路由跳转：this.$router.push()

$route一般用来获取路由信息，获取上个路由传参的数据：this.$route.params或this.$route.query

路由的几种方式

（1）声明式

//使用path传参
 子页面1
//使用name传参 
子页面1
 //:to=""  可以实现动态绑定的 路由 和 参数

（2）编程式

//query传参：
this.$router.push({path: '/路径',query:{id: 'aaa'}})
//params传参
this.$router.push({name: '组件名称',params:{id: 'aaa'}})

vue-router中query和params传参的区别

query传参相当于在地址栏上写入?ia=aaa，刷新页面数据不会消失，传参时数据也可以不写

params传参相当于在地址栏写上/aaa，此组件的路由path配置什么都没有的话用户刷新页面数据会丢失，位 使数据不丢失，path应该配置为/:id，使用占位符来保存数据

 

附上一篇详细介绍

转载来自https://blog.csdn.net/mf_717714/article/details/81945218

 

//$router : 是路由操作对象，只写对象
//$route : 路由信息对象，只读对象

//操作 路由跳转
this.$router.push({
      name:'hello',
      params:{
          name:'word',
          age:'11'
     }
})

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

 

1·query传递参数

我看了很多人都说query传参要用path来引入，params传参要用name来引入，只是我测试了一下，query使用name来引入也可以传参，使用path也可以。如果有人知道原因可以告诉我一下，谢谢！

//query传参，使用name跳转
this.$router.push({
    name:'second',
    query: {
        queryId:'20180822',
        queryName: 'query'
    }
})

//query传参，使用path跳转
this.$router.push({
    path:'second',
    query: {
        queryId:'20180822',
        queryName: 'query'
    }
})

//query传参接收
this.queryName = this.$route.query.queryName;
this.queryId = this.$route.query.queryId;
————————————————
版权声明：本文为CSDN博主「mf_717714」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/mf_717714/article/details/81945218

2·params传递参数

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

• 使用params传参

• //params传参 使用name
  this.$router.push({
    name:'second',
    params: {
      id:'20180822',
       name: 'query'
    }
  })
  
  //params接收参数
  this.id = this.$route.params.id ;
  this.name = this.$route.params.name ;
  
  //路由
  
  {
  path: '/second/:id/:name',
  name: 'second',
  component: () => import('@/view/second')
  }

  需要注意的是：

  params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数，没有也没关系。
  params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。
  如果路由后面没有 /:id/:name效果如下图，地址栏没有参数 ，刷新一下，页面失败

• 因此我们不可能让用户不要刷新，所以我们必须在路由后面加上 /:id/:name

• 如果使用path进行传参

• //params传参 使用path
  this.$router.push({
    path:'second',
     params: {
      id:'20180822',
       name: 'query'
    }
  })
  
  //params接收参数
  this.id = this.$route.params.id ;
  this.name = this.$route.params.name ;

   

• 效果如下图

  使用path传参什么效果都没有。

3.总结
传参可以使用params和query两种方式。
使用params传参只能用name来引入路由，即push里面只能是name:’xxxx’,不能是path:’/xxx’,因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！。
使用query传参使用path来引入路由。
params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数，没有也没关系。
二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示。
————————————————
版权声明：本文为CSDN博主「mf_717714」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/mf_717714/article/details/81945218