Vue路由传参及传参后刷新导致参数消失处理

最新推荐文章于 2024-06-24 20:15:29 发布
最新推荐文章于 2024-06-24 20:15:29 发布
阅读量382 收藏
点赞数
分类专栏： Vue-Router 文章标签： Vue路由传参
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33601443/article/details/102591500
版权

在刷新后，使路由传递的参仍然存在

	this.$router.push({ name: 'test2', query: { id: '1' }})

获取参数

	this.$route.query.id

原理是通过在路径上面绑定参数传递。

如果传递的是对象，那么刷新后可能会存在[Object,Object]的情况，

解决方法: 再传参的时候先转为字符串，然后再转为对象

二水你要努力啊
关注
专栏目录
vue-router 动态路由 warning:Route with name ‘Menu‘ does not exist
News777的博客
10-10 1430
vue-router 动态路由 warning:Route with name 'Menu' does not exist
vue路由传参页面刷新参数丢失问题解决方案
10-16
主要介绍了vue路由传参页面刷新参数丢失问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue中路由传参刷新页面后参数丢失的问题
nyf_unknow的博客
04-28 1390
项目场景： 大数据中台修改表格数据 问题描述 编辑表格行数据，跳转到编辑页面，刷新页面数据丢失 解决方案： 在表格页面点击编辑按钮时将要传递的参数用JSON.stringify(row)转换成字符串 //编辑属性 editAttribute(row) { this.$router.push({ path: "/independent/...", query: { // url的参数, 类似ge
Vue进阶（六十七）页面刷新路由传参丢失问题分析及解决_vue路由刷新参数消失
最新发布
2401_85124192的博客
06-24 989
小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析。
vue路由跳转携带参数刷新页面是否消失的问题（query / params）
Yugoup的博客
03-24 813
1.刷新页面后丢失携带的参数 //这里使用name进行路由的跳转，携带参数时用params，跳转后，url上不会出现参数，刷新页面后参数会丢失 this.$router.push({ name: "page1", params: { code: this.code }, }); //接收参数时用 this.$route.params.code 2.刷新页面后依旧保留参数 //但是，携带参数时用query，跳转后，url上会拼接参数，刷新页面后参数不会丢失，依然是那个带参数的url this.$ro
详解解决Vue相同路由参数不同不会刷新的问题
12-29
通常情况下我们喜欢设置keepAlive 包裹 router-view <div id=app> <keep> <router></router> </keep> </div> 同时在created 中触发请求，在路由参数不同的情况下并不会执行对应的操作。 解决方法： 1、给 router-view 设置 key 属性为路由的完整路径 <keep> <router key=$route.fullPath></router> </keep> 这种方法我觉得应该
vue params传参刷新网页数据丢失解决方法
muzidigbig的博客
07-28 2596
上面没用到localStorage是因为如果用户跳转到页面A后，直接关闭浏览器，再打开浏览器输入网址，就能从本地存储找到该数据，但是。存储在localStorage里的数据如果不是主动去清除的话，就算浏览器关闭了，下次打开浏览器他还是会存在。上面的做法虽然满足了刷新网页数据不丢失，但是没满足第二个条件，数据出现在url地址里了。，这样虽然可以让数据不出现在url地址里，但是刷新网页会导致数据丢失。传参时，由于数据是拼接在url地址后面的，所以刷新网页不会导致数据丢失。传参，数据不会出现在url地址里。
Vue路由传参当传参后刷新导致参数消失问题处理
typhoonpython的博客
04-28 2234
在实际项目中使用字符串拼接，使用iframe跳转链接进行报表展示。 路由传参的时候出现刷新参数丢失问题，具体解决如下： 在进行路由配置的时候使用如下设置进行的配置，用的params方法进行参数传递。 { path: 'data-detail-edit/:type', component: () => import('@/views/cost/costDetail/index'), name: 'test1' params: { type: 1 }, me
vue路由传参 vue路由传参
11-18
- 刷新页面后，如果未在路由配置中定义的参数将会丢失，因为浏览器不会保存这部分信息。 - 只适用于已知的、固定的参数名，通常用于唯一标识如 ID。 ### 3. 混合使用 Query 和 Params 有时，你可能需要结合使用 ...
vue项目中传递参数跳转路由，刷新或从下级页面返回后参数消失解决方案
weixin_45106076的博客
07-25 1896
项目中碰到一个问题，从页面A->B->C之间携带参数跳转，刷新B页面或从C页面返回B页面时，A传给B的参数消失了，变成了undefined。
router路由跳转使用query传递参数刷新后数据无法获取
lindali1115的博客
04-24 4509
代码示例 路由跳转代码 if (data.code === 200) { this.$router.push({ name: 'admin/', query:{ accountInfo:data.data, } }) } 获取参数,初次载入 console.log(this.$route.quer...
Vue进阶（六十七）页面刷新路由传参丢失问题分析及解决
IT全栈 华强工作室
09-01 1710
问题描述：Vue项目上线后，从A页面跳转至B页面，B页面通过data中接收来自A页面的参数信息，并在created页面生命周期调用服务接口serviceA，返回数据后进行B页面数据渲染展示。B页面刷新后，serviceA接口入参丢失且未做入参非空校验，导致serviceA全表查询，导致内存溢出。
vue-router 路由跳转传参刷新页面后参数丢失问题
热门推荐
夏夏
02-15 1万+
常见场景：点击列表详情，跳转到详情内页，传递id参数获取详情数据。 我们先来看看路由跳转的几种方式： 1、通过params方式传参 通过$route.push的path携带参数方式(路由配置中指定参数) // 路由配置 { path: '/detail/:id', //若id后面加?代表这个参数是可选的，即使不传id也不会导致页面无法访问 name: 'detail', component: Detail } // 列表中跳转 this.$router.push({
vue 路由跳转方式；刷新页面后 params 参数的丢失问题
UserGuan的博客
12-13 4731
/ 跳转到指定 url 路径，并向 history 栈中添加一个记录，点击后退会返回到上一个页面// 跳转到指定 url 路径，但是 history 栈中不会有记录，点击返回会跳转到上上个页面(相当于直接替换了当前页面)// 向前或者向后跳转 n 个页面，n 可为正整数或负整数。
vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题
有梦想的咸鱼前端
09-04 6561
最近项目中涉及到跨页面传参数和后台进行数据交互，看到需求之后第一反应就是用路由传参来解决；Vue中给我们提供了三种路由传参方式，下面我们一个一个的来看一下： 方法一：params传参： this.$router.push({ name:"admin", 　　　　//这里的params是一个对象，id是属性名，item.id是值(可以从当前组件或者Vue实例上直接取) ...
vue2+vue-router动态路由添加及路由刷新后消失的解决办法
weixin_44166849的博客
06-06 3819
vue-router动态路由添加及路由刷新后消失的解决办法
vue中如何解决页面刷新之后vuex中的数据消失问题以及vue-router如何传递参数
Amelian的博客
12-05 557
1.vue中如何解决页面刷新之后vuex中的数据消失问题 分析：考察的是如何将vuex数据进行本地持久化 解析： -由于vuex中的数据是存于内存中的，页面刷新重置会导致数据归零，也就是所谓的消失。将数据本地持久化可以解决这个问题 数据本地持久化所用到的技术是本地存储sessionStorage或者localStorage 两者之间的差异是存储期限不一样，sessionStorage当关闭浏览器时数据也随之小时。而localStorage时永久保存在本地 实施方案： state的持久化，也就是分别需要
Vue query路由传参跳转页面，跳转后刷新页面导致参数消失处理
06-06
Vue Router提供两种方式进行路由传参，一种是使用params，另一种是使用query。 使用params传参时，参数会被编码到URL的路径中，例如： ```javascript this.$router.push({ path: '/user/123' }) ``` 这样会跳转到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值