$router.back()携带参数，复杂类型参数和简单类型参数

于 2024-03-25 16:50:38 发布
阅读量718 收藏 1
点赞数 2
文章标签： 前端 javascript 开发语言 vue vuejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zwh2487577416/article/details/137018588
版权

bug来源：今天写代码时遇到一个问题，在当前界面进行表单修改之后，跳转了另一个页面，$router.back()返回原来页面时数据全部清空，开始想到了使用vuex或者localstorage进行存储数据，但是vuex会有出现页面刷新的空白期，效果体验不好；localstorage使用消耗内存太大，加载缓慢，遇到高负载js会有页面加载不出来的bug，所以想到了使用router配合beforeRouteEnter路由进行组件传值。

解决办法

1、传参绑定

2、传参接收，！！！注意在script当中，在destoryed周期中进行销毁。

3、复杂对象类型传参，如果是复杂数据类型，传参之前可以进行JSON.stringify序列化，路由跳转回来之后再进行JSON.parse解析取值，博主上面就是这样做的。简单数据类型就是普通传值即可。

吱声前端攻城狮
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用$router.back()进行页面返回时，先在子路由跳转完后再回到上一级路由
jr_csdn_jr的博客
08-22 1万+
使用路由进行页面前进时，路由会向 history 栈添加一个新的记录，所以，当用户点击$router.back()后退按钮时，则回到之前的 URL。 路由中设置： { path: '/shop', component: Shop , children: [ {path: 'goods', component: ShopGoods}， {path: 'info', component: ShopGoods} ] }, 如果先在子路由中来回点
vue.js this.$router.push获取不到params参数问题
10-15
本文将详细讲解如何正确地使用`this.$router.push`传递和获取`params`参数，并分析为何会出现获取不到`params`的情况。 首先，Vue Router提供两种主要的参数传递方式：`query`和`params`。它们在URL表示和使用场景...
JS $router.back()和$router.go()
Jana Jing的分享
10-26 1031
使用$router.back()和$router.go(-1)作用相同，都是返回原页面，但如果原页面路由携带参数，使用以上两个方式返回的原页面路由参数消失，此时使用$router.back(-1)返回原页面路由，参数仍存在。
router返回
最新发布
m0_58235310的博客
12-13 288
【代码】router返回。
router返回时携带参数
uniquemei的博客
12-21 2万+
vue项目中如何在router.back()的时候携带参数呢，又如何在界面中获取返回的参数呢？废话不多说，直接上代码。 1、在返回界面传递参数 this.$route.params.user = "123"; this.$router.back(); 2、在返回到的上一个界面接收参数 let previousRouterName = ""; let selectUser = ""; beforeRouteEnter(to, from, next) { previousRouterName
vue router back 携带参数
x_duoduoluo的博客
05-24 2111
【代码】vue router back 携带参数。
vue-router back 返回时携带参数
weixin_39729729的博客
09-08 7940
params 的应用 返回前的页面设置参数 this.$route.params.a = 'a'; this.$route.params.b = 'b'; 返回的目标页面获取参数 beforeRouteEnter(to, from, next) { const { a, b} = from.params; // 'a' 'b' // 此处无法直接设置 this.a this.b next(); } created() { aFoo() { this.$route.params.a
this.$router.back返回上一页带参数，上一页面接收参数做出判断
九亿宅男的梦的博客
08-21 1237
/ 使用回调函数修改组件的状态,
vue this.$router.go(-1); 或者 this.$router.back() 返回时怎么带参数
热门推荐
weixin_40841731的博客
04-22 2万+
1、声明一个空的Vue模块goBackEntity import Vue from 'vue' /** * 定义空的vue实例，作为 goBackEntity实现非父子组件之间的通信(vue2.x中去掉了broadcast) */ var goBackEntity = new Vue({}); export default goBackEntity; 2、在需要传参数的页面 ...
Vue中this.$router.push参数获取方法
11-26
由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。 及通过路由配置的name属性访问 在路由配置文件中定义参数：   通过name...
解决vue.js this.$router.push无效的问题
10-18
今天小编就为大家分享一篇解决vue.js this.$router.push无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue router携带参数返回上一页
weixin_59081597的博客
09-12 2698
实现思路：跳转时将所需要的参数用$router携带参数传递过去，在跳转的页面使用beforeRouteEnter获取上个页面的路径，然后使用$router方法再携带参数传递回去。问题： 列表页非第一页数据跳转列表详情页再返回后展示的数据是第一页。需求：跳转时是第几页返回后还是第几页。
Vue------this.$router.back()、this.$router.go()的异同
COCOLI_BK的博客
05-27 5147
返回上一个页面： 1.$router.back() 2.$router.go() 区别点在于： go(-1): 原页面表单中的内容会丢失； this.$router.go(-1)：后退+刷新； this.$router.go(0)：刷新； this.$router.go(1) ：前进 back(): 原页表表单中的内容会保留；在返回界面传递参数； this.$router.back():后退 ； this.$router.back(0) 刷新； this.$router.back(1)：前进
vue中 this.$router.back()、this.$router.go()的区别
weixin_44378370的博客
06-15 990
开发中遇到返回上一页的需求，有两个方法可选：在使用中发现，使用r o u t e r . b a c k ( ) 和 router.back()和router.back()和router.go(-1)作用相同，都是返回原页面。但如果原页面路由携带参数，使用以上两个方法返回的原页面路由参数消失，此时使用$router.back(-1)返回原页面路由参数仍存在。代码:...
vue中this.$router.back()、this.$router.go()的区别使用
weixin_45941064的博客
04-08 1万+
vue中this.$router.back()、this.$router.go()的区别使用
vue中$router.back()、$router.go()的区别使用
qq_37734787的博客
10-14 2万+
使用解析1 开发中遇到返回上一页的需求，有两个方法可选： 1.$router.back() 2.$router.go() 在使用中发现，使用router.back()和router.back()和router.back()和router.go(-1)作用相同，都是返回原页面。但如果原页面路由携带参数，使用以上两个方法返回的原页面路由参数消失，此时使用$router.back(-1)返回原页面路由参数仍存在。 使用解析2 go(-1): 原页面表单中的内容会丢失； this.$router.go(-1)：后退
Vue 路由 跳转【返回、刷新、跳转】
estrusKing的博客
03-23 1万+
Vue 路由 跳转【返回、刷新、跳转】this.$router.go(-1)this.$router.back()this.$router.pushthis.$router.replace this.$router.go(-1) 原页面表单中的内容会丢失； 向前或者向后跳转n个页面，n可为正整数或负整数 this.$router.go(-1)：后退+刷新 this.$router.go(0)：刷新； this.$router.go(1) ：前进 this.$router.back() 原页表表单中的内
vue实现路由router跳转（网页跳转）带数据传递的方法
HeiYanMin的博客
04-26 3430
vue实现路由router跳转（网页跳转）带数据传递的方法 1. 使用$router.push 拼接参数传参 this.$router.push('/editCardetail?name=add') 2. 使用name来确定匹配的路由，通过params来传递参数 this.$router.push({ name: 'login', param...
vue-router 的使用及参数传递
搬运Gong
05-02 981
vue-router 使用及参数传递
$router.back()想携带参数
05-31
$router.back() 方法本身是不支持携带参数的，因为该方法是用于浏览器的历史记录后退功能，无法传递参数。但是，可以通过在路由地址中携带参数，然后使用 $router.push() 方法进行路由跳转，再使用 $router.back() 方法进行后退，从而实现携带参数的后退操作。 具体实现步骤如下： 1. 在路由地址中携带参数，例如： ```javascript this.$router.push({ path: '/home', query: { id: '123' } }) ``` 2. 在目标页面中获取路由参数，例如： ```javascript this.$route.query.id ``` 3. 使用 $router.back() 方法进行后退操作，例如： ```javascript this.$router.back() ``` 需要注意的是，如果使用 $router.push() 方法进行路由跳转时，需要使用 path 或 name 属性指定目标路由地址，不能使用 $router.back() 方法进行跳转。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值