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

最新推荐文章于 2024-03-13 14:33:01 发布
最新推荐文章于 2024-03-13 14:33:01 发布
阅读量198 收藏
点赞数
文章标签： vue-router传参 params和query传参、接收参数区别
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44021199/article/details/101112074
版权

代码上来看

query要用path来引入，params要用name来引入，接收参数都是类似的，分别this.$ route.query.name 和 this.$route.params.name

<router-link :to="{path:'/mine',query:{id:777,name:'小赵'}}">Mine-query</router-link>|

<router-link :to="{name:'mine',params:{id:666,name:'小王'}}">Mine-params</router-link>

地址栏展示来看

query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，query在浏览器地址栏中显示参数，params则不显示
query：
在这里插入图片描述
params：
在这里插入图片描述

刷新时

params显示的内容刷新之后消失了，query页面内容依然存在；

Inspiring_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue Router 的params和query传参的使用和区别
你如今的气质里，藏着你走过的路，经历过的事，读过的书，和爱过的人。
12-09 174
首先简单来说明一下$router和$route的区别 //$router : 是路由操作对象，只写对象 //$route : 路由信息对象，只读对象//操作 路由跳转 this.$router.push({ name:'hello', params:{ name:'word', age:'11' } }) //读...
Vue router的传值，params和query的区别
NI_computer的博客
10-09 248
在Vue router中可以使用params和query来传递值。相当于get和post的区别。query相当于get请求，传递的值会放在地址栏中展示，而params相当于post请求，传递的值不会显示在地址栏中。 其中，query传值的方法路由可以没有名字，但是params传值必须要有名字。 <div id="app"> <h1>点击链接跳转界面</h1> <router-link :to="student">跳转到学生&l
Vue路由query 和 params 传参的区别
陈新科的博客
10-20 1292
通过 url 传递参数控制页面显示数据的两种方式 1. query 传统问号传参 url 格式：xxx.com/product?id=123 模板内获取数据：this.$route.query.id 2. params 动态路由匹配 url 格式：xxx.com/product/123 模板内获取数据：this.$route.params.id 注意这个方式参数字段名 id 要在路由配置中定义 用冒号的形式标记 参数可以继续拼接 /student/:id/:name/:age/:address
Vue-Router:query和params两种传参的区别
I_not_canel的博客
03-01 365
params传参：类似POST传参，为了保护包含私密信息的参数。URL地址栏中不显示参数，但是Vue-Router默认页面刷新后参数params参数丢失。query传参：URL地址栏中会显示参数，“？”为参数开始“&”连接多个参数。不过在Vue-Router后来的版本中，params参数获取不到了。官方解释称使用这个方法获取params参数会破坏你的app。
vue学习之vue-router动态路由传参中params和query的区别
King的博客
07-31 1029
vue-router传递参数(params和query的区别) query和params的区别 区别一： this.$router.push()方法中，params传值必须有name属性。 this.$router.push() 方法中，query传值与name和path属性无必然联系，和其中哪个属性搭配都可以传值。 区别二： params传值在url上是看不到传递的参数的。 query传值在url上能看到传递的参数，如：http://192.168.187.20:8080/#/dashboard/?da
vue-router query和params传参的区别
cwyp18809的博客
04-09 1153
1.query方式传参和接收参数 （1）传递参数 this.$router.push({ path:'/xxx', query:{ id:id } }) 接收参数： this.$route.query.id 通过query方式传参会在地址栏上出现参数和参数名，有点类似于Get请求 例： 注：传参...
vue-router的params和query的传参区别
Harley567
09-16 200
1.路由跳转方式path和name的区别; 2.路由传参方式query和params的区别; 3.动态路由传参的概念
vue router使用query和params传参的使用和区别
08-28
本篇文章主要介绍了vue router使用query和params传参的使用和区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
浅析vue-router中params和query的区别
10-15
在 Vue Router 中，`params` 和 `query` 是两种不同的参数传递方式，它们在使用场景和表现形式上有所差异。以下是关于 `params` 和 `query` 的详细解析。 1. 引入方式： - `query` 参数通常与动态路径中的 `path` ...
浅析vue-router jquery和params传参(接收参数)$router $route的区别
10-18
- `$router` 是VueRouter的实例，它是一个全局的路由控制器。 - 它可以用来实现页面的跳转，具体方法有 `$router.push` 和 `$router.replace`。 - `$router.push` 方法用于编程式的、向history栈中添加一个新的记录...
vue-router:vue-router源码学习
03-23
- `params` 和 `query` 属性分别用于获取路径中的动态参数和查询字符串。 6. **导航链接** - `<router-link>` 和 `<router-view>` 是 Vue Router 提供的两个主要组件，前者用于创建导航链接，后者用于渲染对应的...
vue-router 中使用query和params传参的区别
mostrichman的博客
06-12 247
使用场景：当我们在vue应用中进行路由跳转时，有时候跳转后的页面需要用到跳转前页面的数据，当然实现方法有很多种，vuex，localstorage，事件总线等。当数据量不大时，通常有时只需要传递一个id，这时使用这些方法多少有些繁琐，而使用路由传参的的方式就要简便许多。注意：使用params传参的数据在页面刷新后会消失，如果不想要刷新后数据消失，需要在路由文件中将路由配置为动态路由。1.params传参和query传参都支持编程式和声明式两种写法。同样有声明式和编程式两种写法。有声明式和编程式两种写法。
vue-router中params和query的区别
bantoumingasong的博客
11-15 942
query和params是vue router中两个传参的方式，整体上很像，在一些细节上有一定的区别，需要注意一下两者的获取参数的方式都是采用具体为。
vue-router中query和params的区别
最新发布
Luna_sun_01的博客
03-13 366
query和params分别是：this.$route.query.id，this.$route.params.id。params方法传参时，要在路由后面加参数名，并且传参时，参数名要跟路由后面设置的参数名对应。query方法，就没有这种限制，直接在跳转里面用就可以。params在浏览器地址栏中不显示参数名称。query在浏览器地址栏中显示参数名称。
vue-router中传递参数query和params的区别
majunze123的博客
06-13 1508
vue-router中params和query的区别（新手的个人理解）
Vue Router 的params和query传参的使用和区别（详尽）
weixin_42408447的博客
06-30 3293
首先简单来说明一下router和router和router和route的区别 //$router : 是路由操作对象，只写对象 //$route : 路由信息对象，只读对象 //操作 路由跳转 this.$router.push({ name:'hello', params:{ name:'word', age:'11' } }) //读取 路由参数接收 this.name = this.$route.params.name; t
Vue Router 的query和params的区别？
m0_52644825的博客
10-16 1488
区别一：区别一：（1）query相当于get请求，页面跳转的时候可以在地址栏看到请求参数（2）params相当于post请求，参数不会在地址栏中显示区别二：（1）query 刷新不会query里面的数据（2）params刷新会丢失params里面的数据。
vue-router中 query传参和params传参的使用和区别
热门推荐
alokka的博客
11-20 2万+
1.query传参： 1.query传参 路由： var router = new VueRouter({ routes: [ { path: '/login', component: login }, { name:'register',path: '/register', component: register } // name 或 pat...
vue-router 的params query传参
04-01
在使用 Vue.js 进行前端开发时，经常需要进行页面的跳转和参数的传递。Vue.js 提供了一个官方的路由插件 vue-router，可以方便地进行页面的跳转和参数的传递。 vue-router 支持两种方式进行参数传递：params 和 query。 params 传参： params 是路由路径中的占位符，可以通过 $route.params 来获取传递的参数。使用 params 传参时，需要在定义路由规则时使用冒号将参数名包裹起来，例如： ```javascript const router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ] }) ``` 在上面的例子中，定义了一个 /user/:id 的路由规则，其中 :id 是一个占位符，可以接受任意的参数。 在组件中访问传递的参数时，可以通过 $route.params.id 来获取： ```javascript const User = { template: '<div>User {{ $route.params.id }}</div>' } ``` 在使用 params 传参时需要注意，如果在同一个路由规则下，参数发生变化时不会触发组件的生命周期钩子函数，需要通过 watch 监听 $route 对象来实现： ```javascript const User = { template: '<div>User {{ id }}</div>', watch: { '$route.params.id' (to, from) { this.id = to } }, data () { return { id: '' } } } ``` query 传参： query 是通过 URL 的查询字符串传递参数，可以通过 $route.query 来获取传递的参数。使用 query 传参时，需要在定义路由规则时使用问号将参数名包裹起来，例如： ```javascript const router = new VueRouter({ routes: [ { path: '/user', component: User } ] }) ``` 在组件中访问传递的参数时，可以通过 $route.query.id 来获取： ```javascript const User = { template: '<div>User {{ $route.query.id }}</div>' } ``` 在使用 query 传参时需要注意，参数的值会被转换为字符串类型，如果需要传递数组或对象等复杂数据类型，需要将其转换为 JSON 字符串。在组件中获取参数时需要使用 JSON.parse 解析字符串。例如： ```javascript // 在路由中传递数组参数 router.push({ path: '/user', query: { ids: JSON.stringify([1, 2, 3]) } }) // 在组件中获取数组参数 const User = { template: '<div>User {{ ids }}</div>', computed: { ids () { return JSON.parse(this.$route.query.ids) } } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值