前言

在上面的文章当中，小编已经使用过route.params的方式传递参数了，下面我们再来学习一种route.query参数传递的方式。

一、编写Profile页面

二、编写App.vue入口

普通的写法

<router-link v-bind:to="{path: '/profile',query: {name:'summer-少年',age:18,sex:1,email:'1973984292@qq.com'}}" tag="button" replace>档案</router-link>

当然你也可以这样写

<button @click="profileClick">档案</button>

触发点击事件

methods: {// 参数传递方式profileClick(){this.$router.push({path: '/profile',query: {name: 'ydf',age: 20,sex: 2,email: '1973984292@qqcom.cn'}})}
}

三、路由配置，index.js

携带参数：http://localhost:8080/profile?name=ydf&age=20&sex=2&email=1973984292%40qqcom.cn

四、对比route.params方式传参

路由index.js

App.vue入口

<router-link v-bind:to="'/user/'+userId+'/name/'+userName" tag="button" replace>用户</router-link>

或者这样写

<button @click="userClick">用户</button>

 // 参数传递方式
userClick(){// 带参数跳转this.$router.push('/user/' + this.userId+'/name/'+this.userName)
}

页面接受

五、项目中

 {path: '/dt/detail/:articleId',component: Detail
},

@click="detailFun(item.articleId)"

 detailFun(value) {this.$router.push(this.articleArray[0].path +'/'+ value)
},

{{$route.params.articleId}}

 created() {console.log(this.$route.params.articleId)}

Vue系列vue-router的参数传递的两种方式（五）相关推荐

【Vue】路由Router传参的两种方式（详解）
本文我们来介绍一下Vue中的路由传参问题,首先我们来准备一个基本路由的页面,如下: <!DOCTYPE html> <html lang="en"> & ...
vue 路由传参 params 与 query两种方式的区别（转载）
vue 路由传参 params 与 query两种方式的区别初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...
vue 路由传参 params 与 query两种方式的区别
vue 路由传参 params 与 query两种方式的区别初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...
【❗划重点！C语言函数参数传递只有两种方式（值传递，地址传递），不支持“引用传递”！❗】
引子上篇文章<C语言函数传参の结构体数组篇>提到了C语言的函数参数传递方式,百度了一一一大圈,有说两种的,也有说三种的,简直把我搞晕了,"值传递和地址传递"是毫无疑问 ...
sh执行文件参数传递_详解shell中脚本参数传递的两种方式
方式一:$0,$1,$2.. 采用$0,$1,$2..等方式获取脚本命令行传入的参数,值得注意的是,$0获取到的是脚本路径以及脚本名,后面按顺序获取参数,当参数超过10个时(包括10个),需要使用${ ...
url 参数传递的两种方式_VB编程中的传值与传址两种参数传递方式，你清楚吗？...
Tips:欢迎公众号设置为星标,VB技术干货文章可以第一时间看到.如您在学习VB过程中有独特的见解或者想法,欢迎投稿,可在公众号文章下直接留言. 推荐阅读 1. VB编程语言基础知识点总结 2. VB ...
url 参数传递的两种方式_Java项目实践，支付功能实现方式，第三方支付与银行接口支付...
1.第三方支付 B2C电商的支付,一般由于支付金额比较小,支付比较频繁,所以一般采用第三方支付,常用的第三方支付有:支付宝.微信等. 他们的原理都差不多,都是在点击支付时,直接调用第三方支付接口,传入 ...
C语言形式参数传递的两种方式
C语言中实际参数(实参)与形式参数(形参)之间的传递方式有传值和传地址两种函数调用方式. 1.直接传值. 直接传值,在fun函数里面改变a,b的值,不会改变主函数里面a,b的值. #include&l ...
vue前端实现上传文件的两种方式
1.使用form表单的形式第一种方式就是使用FormData的方式进行上传 html代码: <el-form :model="upform" :rules="up ...

Vue系列vue-router的参数传递的两种方式（五）

Vue系列vue-router的参数传递的两种方式

前言