router传参接参（详细）

方法一：使用query来传递参数

1.传参页面写法如下：点击传参按钮页面跳转到DingDan，把数组datalist[]传递过去

 searchSubmit() {
      this.$router.push({
        path: "/DingDan",
        query: {
          datalist: this.datalist
        }
      });
  }

2.接参页面写法如下：

方法一：this.$router.currentRoute.query.datalist

方法二：this.$route.query.datalist

方法二：使用router的name属性也就是params来传递参数

1.传参页面写法如下：

 searchSubmit() {
      this.$router.push({
        name: "DingDan",    //跳转页面的name
        params: {
          datalist: this.datalist
        }
      });
  }

2.接参页面写法如下：

console.log("接数据",this.$route.params.datalist);

前两种方法都是比较常用的传参方法下面总结一下区别：

query可以通过name属性或者path属性来引入路由，而params只能通过name属性来引入路由；在使用params传递时如果指定了path属性而没有name属性，那么界面能成功跳转但是不能接受到传递过来的参数
query相当于get请求，跳转页面的时候可以在地址栏中看到请求的参数，而params相当于post请求参数则不会在地址栏中显示
在刷新界面时，query传递的参数不会丢失，而params会丢失

方法三：使用vue里的标签来传递参数

1.传参页面写法如下：

        <router-link target="_blank"
                     :to="{path:'/login',query:{Id: "33333"}}">
         </router-link>

2.接参页面写法如下：

this.$route.params.Id