this.$router.back返回上一页带参数，上一页面接收参数做出判断

已于 2024-02-01 18:02:51 修改
阅读量1.2k 收藏
点赞数 1
分类专栏： vue3 vue 文章标签： vue.js
于 2023-08-21 12:46:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Guoyu1_/article/details/132405942
版权
vue 同时被 2 个专栏收录
95 篇文章 0 订阅
订阅专栏
vue3
18 篇文章 1 订阅
订阅专栏

子组件

this.$route.params.tabIndex = this.tabIndex
this.$router.back()

父组件

data() {

        return {

                tabIndex: 0

        }

},

beforeRouteEnter(to, from, next) {

        next(vm => {

                // 使用回调函数修改组件的状态,vm代替this

                vm.tabIndex = from.params.hasOwnProperty('tabIndex') ? Number(from.params.tabIndex) : 0

         })

},

前端路上迷茫的小鲨鱼
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 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} ] }, 如果先在子路由中来回点
vuex 解决报错this.$store.commit is not a function的方法
10-17
Vuex 是 Vue.js 的一个官方状态管理库，它提供了一个集中化的存储空间，使得在复杂的 Vue 应用中管理共享状态变得更加容易。当遇到 `this.$store.commit is not a function` 的错误，通常是因为在尝试调用 Vuex 中的...
Vue------this.$router.back()、this.$router.go()的异同
COCOLI_BK的博客
05-27 5155
返回上一个页面： 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)：前进
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
$router.back()携带参数，复杂类型参数和简单类型参数
最新发布
zwh2487577416的博客
03-25 764
$router.back()携带参数，复杂类型参数和简单类型参数
vue-router back 返回时携带参数
weixin_39729729的博客
09-08 7945
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
vue router back 携带参数
x_duoduoluo的博客
05-24 2138
【代码】vue router back 携带参数。
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(参数)实现页面跳转操作
10-14
主要介绍了Vue this.$router.push(参数)实现页面跳转操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue.js this.$router.push获取不到params参数问题
10-15
`this.$router.push`方法是用于导航到新的路由的关键函数，但有时候我们在传递`params`参数时可能会遇到一些问题。本文将详细讲解如何正确地使用`this.$router.push`传递和获取`params`参数，并分析为何会出现获取不...
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.go(-1)返回时刷新原来的界面操作
10-15
主要介绍了vue项目使用$router.go(-1)返回时刷新原来的界面操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
10-15
主要介绍了关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue router带参数页面刷新或回退参数消失的解决方法
12-03
传参是前端经常需要用的一个操作，很多场景都会需要用到上个页面的参数，本文将会详细介绍vue router 是如何进行传参的，以及一些小细节问题。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望...
当使用this.$router.back()或者this.$router.go(-1)返回上一页时，搭配组件内路由守卫，屏幕闪烁和跳转页面错误问题
qq_46266925的博客
03-11 2327
当使用this.$router.back()或者this.$router.go(-1)返回上一页时，搭配组件内路由守卫，出现屏幕闪烁和跳转页面错误问题
Vue路由back回退时判断有没有上一个路由
qq_44915607的博客
09-29 2634
onClickLeft () { if (window.history.length <= 1) { this.$router.push({ path: '/' }) return false } else { this.$router.go(-1) } // 上面都没执行就说明卡在当前页不是最后一条， histroy记录数量大于1，又没有回退记录，只能返回首页， // 如果上面都执行了 页面都
vue router携带参数返回上一页
weixin_59081597的博客
09-12 2710
实现思路：跳转时将所需要的参数用$router携带参数传递过去，在跳转的页面使用beforeRouteEnter获取上个页面的路径，然后使用$router方法再携带参数传递回去。问题： 列表页非第一页数据跳转列表详情页再返回后展示的数据是第一页。需求：跳转时是第几页返回后还是第几页。
vue中this.$router.back()、this.$router.go()的区别使用
weixin_45941064的博客
04-08 1万+
vue中this.$router.back()、this.$router.go()的区别使用
this.$router.back()返回上一页路由携带的参数会消失吗
06-08
`this.$router.back()` 返回上一页时，上一页的路由信息和参数都会保留。因为这个方法是浏览器的前进/后退功能，实际上是从浏览器的历史记录中取出上一页的信息并展示出来，所以不会丢失路由参数。 如果你需要在返回上一页时传递参数，可以使用 `query` 或 `params` 参数进行传递。例如，如果你要传递一个名为 `id` 的参数，可以这样调用 `this.$router.back({query: {id: yourId}})` 或 `this.$router.back({params: {id: yourId}})`，这样返回上一页时，参数会被带回并可以在上一页的组件中进行处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值