vue router分别使用query和params传参的不同以及刷新页面出现的数据消失

最新推荐文章于 2022-09-09 22:03:46 发布
最新推荐文章于 2022-09-09 22:03:46 发布
阅读量1.9k 收藏 5
点赞数 4
分类专栏： 前端vue 文章标签： js vue javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangyinze123/article/details/111515260
版权

## query传参
在这里插入图片描述

this.$router.push(path:'/diyName',query:{ a:1, b:2,c:3})

在这里插入图片描述

浏览器url：
在这里插入图片描述
在这里插入图片描述

this.$router.push({path:'/discomfortBook',query:{obj:{a:1,b:2,c:3}}})

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

推荐第二种方式。因为当对象属性字段比较多的时候，第一种传参方式会把query里的所有字段属性都展示出来，导致浏览器上的url会比较长，所以用第一种方式传参可能导致url超出chorme规定url最长字节长度不超过2m

## params传参

在这里插入图片描述

  this.$router.push({name:'discomfortBook',params:{obj:{a:1,b:2}}})

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

Vue2路由守卫：解决路由传参页面刷新后参数消失的问题
l_q_l的专栏
08-24 2145
sessionStorage和localStorage都是HTML5提供的Web Storage API的一部分，用于在客户端存储数据。它们的主要区别在于数据的生命周期、存储的持久性以及适合的应用场景。sessionStorage适合存储临时数据，而localStorage适合存储需要长期保存的数据。两者都有5MB的存储空间限制，且只能存储字符串类型的数据，但可以通过序列化和反序列化的方式存储其他类型的数据。
vue router使用query和params传参的使用和区别
08-28
本篇文章主要介绍了vue router使用query和params传参的使用和区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue 使用 this.$router.push到同一个页面但是参数不同页面不刷新的问题
楠之枫雪的博客
05-14 7974
解决思路：通过query传递参数即可，亲测可以，原理尚未知，先记录一下。 this.$router.push({name: 'ListModel', query: {modelId: modelId}}); 在新页面查询查询参数调用获取数据方法 //创建页面时调用获取页面数据方法 created() { this.getData(); }, methods: { getData() { //通过$route.
路由传参query和params区别，第一次进入页面监听不到路由跳转参数，再次进入才能监听到路由跳转参数的问题
qq_45630675的博客
03-01 876
1. 路由传参query和params区别 使用query传参时，用path进行引入 （使用name也可以，个人习惯使用path） this.$router.push({ path: '/warning/warning-query', query: { glbm: this.userInfo.dwdm, item_name: item.subType } }) 使用params传参时，用name
this.$router.push() 方法中 path不能和params一起使用，否则params将无效
南北极之间
07-09 3293
this.$router.push() 方法中 path不能和params一起使用，否则params将无效！！ this.$router.push传递参数有2种方式： 第一种： 传递参数 -- this.$router.push({path: ' 路由 ', query: {key: value}}) 参数取值 -- this.$route.query.key 使用这种方式，传递参数会拼接在路由后面，出现在地址栏. 第二种： 传递参数 -- this.$router.push({name: '
vue-Router如何传参以及解决params传参页面刷新导致params参数清空的问题
weixin_40380115的博客
05-23 6584
路由传参 vue中路由传参的参数主要有两种：query与params参数。 首先介绍一下两种的的使用方式与区别吧。 query参数，可以使用path(要跳转的目标路由)，与name(要跳转的目标路由组件的名称，因此要在路由中添加name)两种方式 。例如： 我在当前路由要跳转到目标路由/songsDetail中，且用传递query参数。首先配置路由为： import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const ro
Vue路由params、query参数丢失解决
见贤思齐焉，见不贤内自省
03-03 4952
在vue中路由传参有两种形式：1.params；2.query 解决办法：sessionStorage或者localStorage 两者的区别：localStorage是永久保存不清除一直存在,sessionStorage关闭客户端即清除 首先有两个页面，通俗点页面一和页面二； 页面一给页面二传递路由参数 params参数 this.id = 666 this.$router.push({ name: '页面二', params: {
vue params、query传参使用详解
08-29
Vue 参数传递详解 在 Vue 中，参数传递是一...Vue 中的参数传递方式有多种，包括 params 传参、query 传参和使用 `router-link` 组件传参。不同的传递方式适用于不同的场景，我们可以根据实际情况选择合适的传递方式。
浅析vue-router jquery和params传参(接收参数)$router $route的区别
10-18
- `$router` 是VueRouter的实例，它是一个全局的路由控制器。 - 它可以用来实现页面的跳转，具体方法有 `$router.push` 和 `$router.replace`。 - `$router.push` 方法用于编程式的、向history栈中添加一个新的记录...
vue router带参数页面刷新或回退参数消失的解决方法
10-17
在使用Vue Router进行页面间传递参数时，经常会遇到参数在页面刷新或者浏览器后退时消失的问题。本文将详细介绍如何在Vue Router中带参数进行页面跳转，并解决刷新或回退时参数消失的问题。 首先，了解在Vue Router...
vue-router params无法传参的问题（路由传参）
h919685908的博客
09-09 3432
路由传参方式导致传参失败
解决vue-router中的query动态传参问题
12-29
最近在写项目，在写项目的过程会总发现这样或者那样的问题，比如说vue-router中的query如何传递动态的参数，经过了一些波折才解决了问题，问题描述如下： 希望跳转的时候url是这样的：http://localhost:8080/editmovie?id=**** 修改 但是呢？上面的只是一个静态的，url永远会是：http://localhost:8080/editmovie?id=111 实际上我需要
vue-router params无法传参的问题
热门推荐
流浪的神明
10-08 2万+
最近需要使用router 的params传参，原来使用的是query传参，因为参数太多，而且query传参可以在地址栏看到，所以想要使用params传参。这是我开始写的代码：this.$router.push({ path:'Test', name:"Test", params:{ name:
vue中this.$router.push()通过Param传参错误
weixin_56861492的博客
08-20 2603
vue中this.$router.push()通过Param传参错误
【vue项目中 query和 params传参刷新后数据消失问题】
Lnbd_的博客
01-11 535
vue项目中 query传参刷新后数据消失问题
vue-router的query和params的区别/若刷新当前页面params对象里面数据会消失，而query不会
ispaomoya博客
10-12 1028
主要讲3点 1.query和params使用区别（重点） 模拟一下路由，假设已经在router.js文件里定义path=‘aaa/index2/’和name='index2' query使用 //当前页面，index1.vue methods:{ //一个点击按钮，事件 btnClick () { this.$router.push({ path:'aaa/index2', //如果不想用path的话，可以用name代
params详解
qwbtc的博客
04-13 1万+
或 以上二者相同，因为堆跌之后遇见最后一个参数（content或photo）相同时第一个参数自曾([]) params中存储的格式相当与 params = {"utf-8"=>"✓", "body" => [{"te
vue中使用params传参，刷新页面后params参数丢失解决方案
xioxi
07-21 9866
vue中使用params传参，刷新页面后params参数丢失解决方案。
Vue Router 的params和query传参刷新后参数丢失情况
Songywaa的博客
11-17 5499
开发中遇到刷新页面参数丢失的情况 params是路由的一部分，创建路由时，须要在路由后边添加参数名。 query是拼接在URL后边的参数，创建路由时，不用必须添加，可以直接跳转的时候携带即可 params 参数丢失情况： params 传参需要在路由后边添加参数名，例如：/:id/:name，如果在路由中没配置参数，当页面刷新之后，所传参数就会消失 如果在路由中配置了参数，例如： /:id/...
如何解决Vue Router 中使用 params 传参，页面刷新参数丢失的问题
最新发布
07-12
在Vue Router中使用params传参时，页面刷新参数丢失的问题可以通过以下几种方式来解决： 1. 使用query参数代替params参数：将参数传递给路由时，可以考虑使用query参数而不是params参数。query参数会以查询字符串的...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值