Vue中this.$router.push路由跳转,刷新参数消失

最新推荐文章于 2023-05-19 10:41:07 发布
置顶 最新推荐文章于 2023-05-19 10:41:07 发布
阅读量5.6k 收藏 4
点赞数 2
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36647982/article/details/102585861
版权

  • this.$router.push({name:"",params:{id:""}})
    name和params搭配刷新参数会消失

  • this.$router.push({path:"",query:{id:""}})
    path和query搭配，刷新页面参数不会消失，query中参数成了url中的一部分

Strangღr
关注
专栏目录
Vue路由vue-router使用this.$router.push();实现页面跳转以及传参。
L_WalkingPig的博客
04-08 3073
首先请确保项目已经安装了vue-router： 运行命令：npminstallvue-router--save （也可自行百度） 安装后在项目package-lock.json 文件中查看版本信息： "vue-router": { "version": "3.1.6", "resolved": "https://..xxx.org/artifactory/a...
Vue中this.$router.push（参数） 实现页面跳转
lucky__peng的博客
12-04 1167
// push参数为字符串 this.$router.push('/hello') // 参数为对象 this.$router.push({ path: '/hello' }) // 对象中有query属性，相当于发送了一次get请求，请求参数会显示在浏览器地址栏中 this.$router.push({ name:'Register', query: { id: this.id } ) /* 对象中有params属性，相当于发送了一次post请求，请求参数不会显示在浏览器地址栏中， 并且刷新页面之后
vue-router路由参数刷新消失的问题解决方法
08-30
本篇文章主要介绍了vue-router路由参数刷新消失的问题解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue-router路由参数刷新消失的问题
尹小姐的博客
04-11 1万+
vue-router路由参数刷新消失的问题 页面使用vue-router在跳转时发的参数有用来给下一个页面请求数据用的。在进入页面后再次刷新，参数就消失了,解决方案如下： 1、如果要用 params 传参的话，可能需要在你的路由路径里也加上这个参数，比如你用 this.$router.push({name:'articleDetail, params:{articleId: arti...
vue 学习经验总结（this.$router.push url传参后清空地址栏中的参数）
huhuhuja
11-06 4398
1.在a页面向b页面传参 tohome(){ this.$router.push(path:"/b",query:{id}) } 2.在b页面的cretate接收 created() { this.id=this.$route.query.id this.$router.push({ query: {} }); //清空地址栏参数 },
vue-router传对象、数组，刷新后参数丢失
qq_43641110的博客
01-20 1863
参数丢失情况： query传参里面有对象的话，页面再次刷新丢失，打印会打印出 [Object,Object] ； this.$router.push({ path:'/checkOrder', push:{ item:{ name: 'anna', age: 18 } } }) 如果从 A页面 跳转到 B页面需要携带以下 A页面的参数时，在 B页面 刷新时，就会导致参数消失； 解决办法： (1)可以在A页面中点击跳
使用$router.push传值跳转页面 在页面刷新时传值数据丢失问题 解决
aihisia_Ryen的博客
05-14 1461
在使用$router.push 跳转页面时，如果是params传递参数，则刷新页面后，参数丢失 传值失效。 可以使用sessionStorage在进入该页面时进行数据存储。 sessionStorage使用方法： 存值方法 sessionStorage.setItem('key','value') 取值方式 sessionStorage.getItem('key') sessionStorage 清除方法 sessionStorage.removeItem('key') 清除所有数据 sessio
解决vue.js this.$router.push无效的问题
10-18
然而，在实际开发过程中，我们可能会遇到this.$router.push无效的问题，导致路由跳转无法正确执行。本文将详细介绍在什么情况下this.$router.push可能会失效，以及遇到这种情况时如何解决。 首先，我们需要了解this...
Vue this.$router.push(参数)实现页面跳转操作
10-14
此外，还传递了一个`params`对象，用于在路由跳转时传递额外的参数。需要注意的是，当使用`params`参数时，不能与`path`属性同时使用，因为这会导致参数无法正确传递。 在进行页面跳转时，如果需要传递参数，有两种...
Vue中this.$router.push参数获取方法
08-27
在这个例子中，`:userId`是一个动态参数，可以在`this.$router.push`中传递： ```javascript this.$router.push({ name: 'userDetail', // 使用配置中的name属性 params: { userId: '123' // 传递的参数 } }); ...
vue中路由传参刷新页面后参数丢失的问题
haoxinqing222的博客
08-12 2707
一般的路由传参 this.$router.push({name:'My',params:{id:'123'}}) this.$router.push({path:'/my',query:{id:'123'}}) 对于传参过后，跳转到的页面进行刷新行为，参数丢失问题，一般有下面几种方法 用query传参，query类似于get传参，参数会在url中显示，例如： this.$router.push({path:'/my',query:{key: []}}) 接收参数： this.$route.query
解决刷新页面数据丢失问题及退出登录清空数据
lemon
04-10 2937
记录自己遇到的问题，以备查询。 使用VUEX来统一管理数据状态 在APP.vue中加入如下代码，目的是将vuex里的信息保存到sessionStorage里 //任何页面F5刷新都会执行APP.vue中的生命周期函数 //说明：登录登路由为/login created () { //判断当前路由是否是登录路由， //如果不是，则认为是在非登录界面刷新，将store中的数据保存到sessionS...
vue+elementui tab切换丢失参数
weixin_48271592的博客
06-30 3119
vue+elementui列表跳详情后，点其他菜单进行tab切换丢失详情页参数
this.$router跳转的几种跟参方法
c1824338832的博客
06-27 2526
router跳转的几种跟参方法
vue-router 路由跳转传参刷新页面后参数丢失问题
热门推荐
夏夏
02-15 1万+
常见场景：点击列表详情，跳转到详情内页，传递id参数获取详情数据。 我们先来看看路由跳转的几种方式： 1、通过params方式传参 通过$route.push的path携带参数方式(路由配置中指定参数) // 路由配置 { path: '/detail/:id', //若id后面加?代表这个参数是可选的，即使不传id也不会导致页面无法访问 name: 'detail', component: Detail } // 列表中跳转 this.$router.push({
解决：this.$router.push跳转同一个页面，参数不同不跳转的问题
weixin_45865992的博客
05-19 1438
这里是跳转到的页面，queryData需要先在data里定义。
路由传参后去除路由中参数
liuxi_happy的博客
07-20 1538
路由传参后去除路由中参数。
vue中用this.router.push()路由params传参遇到的页面刷新数据丢失问题
vfjcgg的博客
11-06 9376
最近项目中涉及到跨页面传参数和后台进行数据交互以及用this.router.push()路由params传参遇到的页面刷新数据丢失问题，看到需求之后第一反应就是用路由传参来解决，Vue中提供了三种路由传参方式： 第一种：params传参 this.$router.push({ name:"admin", 　　　　//这里的params是一个对象，id是属性名，item.id是值(可以从当前组件或 者Vue实例上直接取) params:{id:item.id} })
vue实现this.$router.push跳转
最新发布
03-10
在Vue中，可以使用`this.$router.push`来路由跳转。`this.$router`是Vue Router提供的路由实例，通过调用`push`方法可以实现跳转。 具体实现步骤如下： 1. 首先，确保已经安装并配置了Vue Router。 2. 在Vue组件中，可以通过`this.$router.push`来进行路由跳转。 3. `this.$router.push`方法接受一个参数，可以是一个字符串路径或者一个包含路径、查询参数和哈希值的对象。 4. 如果传递的是字符串路径，例如`this.$router.push('/home')`，则会跳转到指定路径。 5. 如果传递的是一个对象，例如`this.$router.push({ path: '/home', query: { id: 1 } })`，则可以指定路径以及查询参数。 6. 跳转完成后，页面会根据路由配置加载相应的组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值