Vue携带参数跳转页面以及防止参数丢失

最新推荐文章于 2024-05-30 16:52:21 发布
最新推荐文章于 2024-05-30 16:52:21 发布
阅读量1.8k 收藏 2
点赞数
分类专栏： 随手记 文章标签： Vue Vue router Vuet跳转页面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41761103/article/details/101444136
版权

最近公司项目重构，前后端分离，主后端开发的我依然逃不过写前端的命运(说好的前后端分离呢)使用Vue的时候遇到了跳转页面的问题

进入正题
不带参跳转

先说跳转，跳转的话，很简单，一段代码就可以实现

this.$router.push('/你要跳转的地址')

以上这种跳转是你不带参数跳转使用的，唯一需要注意的是this的指向

带参跳转

有的时候需要携带参数，实现如下

this.$router.push({ name: '你要跳转的地址', params: { param1: param1Value, param2: param2Value, ... } })

这里需要注意的是跳转的地址不要加“/”，加上“/”会跳转到你的默认首页上去，即项目名/，后面的"你要跳转的地址"直接消失不见
这种方式跳转到新页面之后，一旦刷新，携带的参数会消失，需要注意

带参跳转且刷新不丢失参数

为了防止参数丢失，将params替换成为query即可

this.$router.push({ name: '你要跳转的地址', query: { param1: param1Value, param2: param2Value, ... } })

这种方式唯一不足的地方是get式跳转，所有的参数在地址栏里都可见且容易过长

(第一种不一定是post传参请注意！)

万礼
关注
专栏目录
Vue - 完美解决 Router 路由跳转传参（对象 / 数组）目标页面刷新后参数丢失问题，无论如何刷新页面参数都会存在不会消息的解决方案（详细示例代码，一键复制运行）
王佳斌
03-23 4842
前言 例如，有个列表页，点击后携带参数进入详情页，当刷新详情页后，携带的参数就获取不到了。 我们要的是，无论怎么刷新目标页面， 都不会出现获取不到的情况，如下图所示： 解决方案 如果通过 query 的方式传递对象或数组，在地址栏中会被强制转换成 [object Object]，所以获取不到。 但您可以通过将对象参数，通过 JSON.stringify() 方法进行转换， 在接收页（目标页）使用 JSON.parse() 再转回来。 // 列表页 const data = { type: 'a1
vue带参数跳转打开新窗口参数不在url中
今昭昭昭的博客
05-27 706
参考：传送门
vue页面配置缓存，使页面跳转时填写的数据不丢失
白羊座的橙子
12-20 894
1、项目文件配置App.vue的内容 <template> <div id="app"> <!--所有界面设置缓存--> <keep-alive> <router-view></router-view> </keep-alive> </div> </template> 2、路由中添加keepAlive属性 const routes = .
vue路由跳转携带的参数消失了
tt1234561009的博客
05-31 2637
最近我发现我用params传参时，参数怎么也接收不到，地址栏url中也看不见参数，控制台也不见报错，于是上网查了下原来用第一种方式传参页面刷新后参数会消失，从而获取不到，第二种方式就不会出现参数消失的情况。方法一：在配置路由的时候添加动态参数，路由跳转时还是采用第一种params传参，获取参数直接使用this.$route.params.code。但是我做的这个项目有点特殊，必须要通过路由的name进行跳转，下面两种方法我都尝试了，可以成功获取到了参数，亲测有效(*^_^*)1）params传参。
Vue路由params、query参数丢失解决
见贤思齐焉，见不贤内自省
03-03 4925
在vue中路由传参有两种形式：1.params；2.query 解决办法：sessionStorage或者localStorage 两者的区别：localStorage是永久保存不清除一直存在,sessionStorage关闭客户端即清除 首先有两个页面，通俗点页面一和页面二； 页面一给页面二传递路由参数 params参数 this.id = 666 this.$router.push({ name: '页面二', params: {
Vue-Router路由携带参数跳转3种方式大全，刷新页面参数不丢失，不显示到地址url中
coderYYY的博客
11-11 6794
此博客将详细介绍Vue-router传参的方法大全
vue router带参数页面刷新或回退参数消失的解决方法
10-17
本文将详细介绍如何在Vue Router中带参数进行页面跳转，并解决刷新或回退时参数消失的问题。 首先，了解在Vue Router中如何传递参数是非常重要的。在Vue Router中传递参数主要分为两种方式：params和query。 1. ...
VUE页面跳转刷新参数丢失问题解决
zzy0609的博客
11-12 7683
VUE页面跳转刷新参数丢失问题解决 一、场景 在做本司一个系统的前台过程中，对展示的数据需要进行出修改。也就是简单的表单提交进行数据修改 二、实现 在以前的开发过程中都是将数据放到session中，由于本次用到的框架为VUE，所以在页面跳转以后参数存储问题，本人是费尽心思，苦于无解，在我点击修改之后。第一次在create方法里面是能够获取到参数的。但是，在f5刷新之后发现并没有参数。（我利用的是V...
vue路由传参页面刷新参数丢失问题解决方案
m0_69940800的博客
05-04 5593
方法二：路由属性配置传参： this.$router.push({ name:“/admin/${item.id}”, }) //这个组件对应的路由配置 { //组件路径 path: ‘/admin:id’, //组件别名 name: ‘admin’, //组件名 component: Admin, } 通过路由属性配置传参我们可以用this.route.params.id来获取到id的值，注意this.route.params.id来获取到id的值，注意this.route.params.id来获取到id
详解vue 路由跳转四种方式 (带参数)
10-17
不过，如果需要在页面刷新时保留参数，则需要在路由配置中使用path属性，否则刷新页面后，查询参数会丢失。 2. 使用this.$router.push()函数调用（带参数） 在Vue组件的方法中，可以使用this.$router.push()进行...
Vue进阶（六十七）页面刷新路由传参丢失问题分析及解决
IT全栈 华强工作室
09-01 1734
问题描述：Vue项目上线后，从A页面跳转至B页面，B页面通过data中接收来自A页面的参数信息，并在created页面生命周期调用服务接口serviceA，返回数据后进行B页面数据渲染展示。B页面刷新后，serviceA接口入参丢失且未做入参非空校验，导致serviceA全表查询，导致内存溢出。
vue页面跳转带参数以及刷新参数消失
最新发布
u011857538的博客
05-30 318
Vue跳转页面带参数刷新后参数消失
vue路由跳转参数丢失
娄小研的博客
01-06 769
// 传参 toDetail(){ this.$router.push({ name:"newsDetail", params:{content:item}//传递过去的参数 }) } // 取参 this.$route.params.comtent 这种参数会丢失 // 传参 this.$router.push({ path: "/newsDetail", query: { .
vue 路由带参跳转时，地址栏数据参数闪现一下就消失了
weixin_39818813的博客
09-13 2889
这个是由于重复跳转导致： 给一个标签加了router-link to “地址”，  然后又为这个标签写了一个方法，在方法里面使用路由传参，这样的话，我们跳转时就在同一个页面跳了两次。去除一个路由就行了。...
vue router 如何使用params query传参，以及有什么区别
weixin_34248023的博客
11-13 1573
写在前面：传参是前端经常需要用的一个操作，很多场景都会需要用到上个页面的参数，本文将会详细介绍vue router 是如何进行传参的，以及一些小细节问题。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。 本文首发于我的个人blog：obkoro1.com Vue router如何传参params、query是什么？ params：/router1/:id ，/ro...
vue-router 路由跳转传参刷新页面后参数丢失问题
夏夏
02-15 1万+
常见场景：点击列表详情，跳转到详情内页，传递id参数获取详情数据。 我们先来看看路由跳转的几种方式： 1、通过params方式传参 通过$route.push的path携带参数方式(路由配置中指定参数) // 路由配置 { path: '/detail/:id', //若id后面加?代表这个参数是可选的，即使不传id也不会导致页面无法访问 name: 'detail', component: Detail } // 列表中跳转 this.$router.push({
vue---界面跳转，文本框的内容不消失
Shawsw的博客
07-20 1094
<transition name="fade" mode="out-in"> <keep-alive> <router-view v-if="$route.name.indexOf('_main')>-1":key="key2"></router-view> </keep-alive> </transition> <router-view v-if="$route.name.indexOf('_main').
vue.js a标签href里添加参数
热门推荐
yitian881112的专栏
06-28 4万+
源代码列表可以正常显示，但是连接没有实现对items.orderNo的值转化，最中解决方法此处的将a的标签href实现绑定：href同时对路径进一步转化拼接
vue query传参刷新后数据消失问题
周家大小姐
01-11 1万+
需求:通过url传参页面跳转当时能正常渲染；但是刷新后数据就消失了； 解决方案： params传参: this.$router.push({name:'list', params:{user: id}}) 取值: this.$route.params.user 发现可以渲染;但是一刷新就变成了[object object] 需要在router.中修改 routes: [ ...
vue中携带参数跳转页面
08-23
在Vue中，你可以使用`<router-link>`或`this.$router.push`来实现带参数跳转页面。 使用`<router-link>`的方式如下： ```html <router-link :to="{ path: '/your-path', query: { param1: 'value1', param2: 'value2' }}">跳转页面</router-link> ``` 在上述代码中，`:to`属性是一个对象，其中`path`是目标页面的路径，`query`是一个对象，包含你要传递的参数和对应的值。 如果是使用`this.$router.push`方式跳转页面，可以在Vue组件的方法中调用： ```javascript this.$router.push({ path: '/your-path', query: { param1: 'value1', param2: 'value2' }}) ``` 同样，`path`表示目标页面的路径，`query`是参数对象。 在目标页面中，你可以通过`this.$route.query`来获取传递过来的参数，例如： ```javascript console.log(this.$route.query.param1) // 输出"value1" console.log(this.$route.query.param2) // 输出"value2" ``` 这样就可以在Vue中携带参数跳转页面了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值