Vue路由传参的两种方式，params和query方式的区别

最新推荐文章于 2024-05-01 01:11:22 发布
最新推荐文章于 2024-05-01 01:11:22 发布
阅读量1k 收藏 3
点赞数 1
分类专栏： Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yzkdcsdn/article/details/121245230
版权

1、用法上的区别：query可以用name也可以用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$router.query.name和this.$router.params.name
2、url展示上：params类似于post，query更加类似于我们ajax中学的get传参，说得简单一点，用params传参在浏览器地址栏中不显示参数，用query传参的话浏览器地址栏中会显示参数，所以用params传值相对安全

yzkdcsdn
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue params、query传参使用详解
08-29
本篇文章主要介绍了vue params、query传参使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue路由传参 vue路由传参
11-18
Vue Router 提供了两种主要的参数传递方式：query 和 params。下面将详细介绍这两种方法，以及它们的特点和使用场景。 ### 1. Query 传参 **方法**：通过 `query` 对象传参，参数将以查询字符串的形式附加到 URL ...
Vue Router 的params和query传参的使用和区别（详尽）
weixin_42408447的博客
06-30 3286
首先简单来说明一下router和router和router和route的区别 //$router : 是路由操作对象，只写对象 //$route : 路由信息对象，只读对象 //操作 路由跳转 this.$router.push({ name:'hello', params:{ name:'word', age:'11' } }) //读取 路由参数接收 this.name = this.$route.params.name; t
【vue】vue路由传参的三种方式
最新发布
2401_84412357的博客
05-01 132
路由传参的使用场景一般都是应用在父路由跳转到子路由时，携带参数跳转。传参方式可划分为params传参和query传参，而params传参又可分为在中显示参数和不显示参数两种方式，这就是vue路由传参的三种方式。
vue路由传参中query方式与params方式的区别
oLylia的博客
09-02 675
vue路由传参中query方式与params方式的区别
vue-router中params和query的区别
bantoumingasong的博客
11-15 919
query和params是vue router中两个传参的方式，整体上很像，在一些细节上有一定的区别，需要注意一下两者的获取参数的方式都是采用具体为。
vue中params传参和query传参最大的区别，path、name方式
Zhanggebgchen的博客
05-23 528
query传参时，会将传递的数据会展示在地址栏的url当中，这样造成的问题有两点，第一点就是不美观，让页面看起来杂乱无章， 第二点就是可能会涉及到隐私数据，这枚直白的把意思数据展示的页面当中，肯定会有一些安全的问题params传参的话，传递的数据不会在地址栏的url当中展示，让页面显得美观。
【vue】vue中query和params的区别
小墨鱼的前端问题录
07-17 350
区别：1、query用path编写传参地址，而params用name编写传参地址；2、query刷新页面时参数不会消失，而params刷新页面时参数会消失；3、query传的参数会显示在url地址栏中，而params传参不会显示在地址栏中。
vue路由传参三种基本方式详解
10-15
在Vue Router中，有三种基本的途径来传递参数给目标组件，分别是通过`params`、`query`以及直接在路径中硬编码。下面我们将详细探讨这三种方式及其应用场景。 ### 方案一：通过`params`传递参数 `params`是一种在...
vue路由传参的基本实现方式小结【三种方式】
01-19
传参方式可划分为 params 传参和 query 传参，而 params 传参又可分为在 url 中显示参数和不显示参数两种方式，这就是vue路由传参的三种方式。 方式一：params 传参（显示参数） params 传参（显示参数）又可分为 ...
vue router使用query和params传参的使用和区别
08-28
本篇文章主要介绍了vue router使用query和params传参的使用和区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-router 中使用query和params传参的区别
mostrichman的博客
06-12 239
使用场景：当我们在vue应用中进行路由跳转时，有时候跳转后的页面需要用到跳转前页面的数据，当然实现方法有很多种，vuex，localstorage，事件总线等。当数据量不大时，通常有时只需要传递一个id，这时使用这些方法多少有些繁琐，而使用路由传参的的方式就要简便许多。注意：使用params传参的数据在页面刷新后会消失，如果不想要刷新后数据消失，需要在路由文件中将路由配置为动态路由。1.params传参和query传参都支持编程式和声明式两种写法。同样有声明式和编程式两种写法。有声明式和编程式两种写法。
Vue Router 的params和query传参的使用和区别
qq_26642611的博客
12-25 645
首先简单来说明一下router和router和router和route的区别 //$router : 是路由操作对象，只写对象 //$route : 路由信息对象，只读对象 //操作 路由跳转 this.$router.push({ name:'hello', params:{ name:'word', age:'11' ...
Vue 深入学习param和query两种传参方式及其区别
前端菜菜DayDayUp的博客
09-30 6061
router文件下index.js里面，是这么定义路由的： { path:"/detail", name:"detail", component:home } 1、传参方式 query传参方式：query要用path来引入路由； this.$router.push({ path: "/detail", query: {code:"123"} }) param传参方式：param要用name来引入路由； this.$ro...
Vue 路由传参 query 和 params 的区别
海里鱼的技术博客
09-11 254
query使用 path 和 name 传参跳转都可以，而 params 只能使用 name 传参跳转。 query传参： var router = new VueRouter({ routes: [ { path: '/login', component: login }, { name:'register',path: '/register', component: register } ] }) // 注意：这是 query 两种传参方式 一种是直接跳转把字符
Vue params 和 query 传参的 区别
rememberyf的博客
11-28 8686
今天我们就来说一下params和query传参的使用和区别，要说这个的话，我们就有必要提一下Vue-router了。 Vue-router它主要分为动态路由（传参匹配的问题），嵌套路由（父子组件之间的通信），编程式路由（this.$router.push(‘绝对路径’)），这三方面的内容都是比较容易的，我们参考官方给出的文档就可以理解的差不多，Vue-router官方文档。 我们今天主要来说比较令...
vue中 路由传参query和params的区别
qq_43153895的博客
11-27 330
1.query传参，使用query传参，在定义路由的时候可以不配置参数名称， 路由跳转时既可以用path引入也可以用name引入。 query里的参数会和参数的值拼接在地址栏，跟ajax的get方法类似，传参可以在地址栏直接看到，安全性不高， 接收参数 this.$route.query.参数 定义路由 js路由跳转 地址栏 2.1params传参，在网上看了很多params传参的帖子，说的...
Vue中query与params两种传参的区别
aoliei的博客
11-26 600
query语法： this.$router.push({path:“地址”,query:{id:“123”}}); 这是传递参数 this.$route.query.id； 这是接受参数 params语法： this.$router.push({name:“地址”,params:{id:“123”}}); 这是传递参数 this.$route.params.id; 这是接受参数 区别： 1.首先就是写法得不同，query 得写法是 用 path 来编写传参地址，而 params 得写法是用
Vue学习之路由传参，query和params的区别
qq_18286691的博客
08-14 461
我们在进行Vue页面之间跳转传参的时候，有两种方式可用： （1）this.$router.push({ name: 'xxx', params: { xxx:yyy }}) （2）this.$router.push({ path: 'xxx', query: { xxx:yyy }}) 在进行一次页面跳转的时候，两者没有区别，都会正常的传数据，页面正常加载（如果页面加载依赖传参）。 但是当我们刷新当前页面，或者从其他页面后退回当前页面的时候，如果使用的是params传参，页面数据加载异常，使用que
vue路由传参query和params
05-14
Vue 路由传参可以使用 query 和 params 两种方式。 1. 使用 query 传参： query 方式传参是将参数拼接在 URL 后面，以键值对的形式传递，例如： ```js this.$router.push({ path: '/user', query: { id: '123' }}...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值