vue 页面跳转 带参数页面刷新或者回退参数消失的解决方法

路由参数保持
最新推荐文章于 2023-07-25 17:21:01 发布
原创 最新推荐文章于 2023-07-25 17:21:01 发布 · 2.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #vue.js #前端

本文探讨了在前端开发中使用Vue Router时遇到的问题：当通过params传递参数时，在页面刷新或回退时参数消失的情况。文章提供了解决方案，即使用Query方式传递参数，并介绍了如何接收这些参数。

一、示例：

this.$router.push({  name:'index',params: { id: status},query: { id:  status2 }})

二、问题描述：

       使用params 传递参数，，页面刷新或者回退路由中参数消失

三、解决：

       使用Query 即可解决该问题。

四、接受参数：

this.$route.query.id

 

vue router带参数页面刷新或回退参数消失的解决方法
12-03
写在前面： 传参是前端经常需要用的一个操作，很多场景都会需要用到上个页面的参数，本文将会详细介绍vue router 是如何进行传参的，以及一些小细节问题。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。 Vue router如何传参 params、query是什么？ params：/router1/:id ，/router1/123，/router1/789 ,这里的id叫做params query：/router1?id=123 ,/router1?id=456 ,这里的id叫做query。 路由界面： router.js: 路由设置这里，当你使用params
解决vue页面刷新或者后退参数丢失的问题
08-27
下面小编就为大家分享一篇解决vue页面刷新或者后退参数丢失的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue跳转传参刷新后参数消失
weixin_33826609的博客
02-26 512
一开始需要实现的功能是跳转到一个页面然后传入一个产品ID号，然后在目标页面用这个ID号显示具体的产品信息我是用的方法是在template中使用router-link标签 <router-link to="/product"> <a @click="routerTo(productId)" href="#">...
vue项目中传递参数跳转路由，刷新或从下级页面返回后参数消失解决方案
weixin_45106076的博客
07-25 2107
项目中碰到一个问题，从页面A->B->C之间携带参数跳转，刷新B页面或从C页面返回B页面时，A传给B的参数消失了，变成了undefined。
vue.js页面刷新及后退参数丢失的解决方案
哟西jj的博客
06-15 7246
在使用vue开发的单页面项目中，会经常遇到点击列表传入参数进入详情页，当要打开某一项的详情页或者暂时离开列表页，再返回（后退时），详情页获取的参数会全部丢失，页面同时也会报错，用户体验极度不友好。解决办法有三种：第一种方法：用vue 的<keep-alive>，即在<router-view>外套一层<keep-alive>。虽然可以达到一定效果，但是控制起来比较...
vue2.0页面前进刷新回退不刷新的实现方法
10-18
在Vue 2.0中，有时我们需要实现页面前进时刷新数据，而回退时不重新加载，以提供更好的用户体验。这个功能在单页面应用（SPA）中尤为常见，尤其是在导航历史管理和数据缓存的场景下。以下是一种实现这一功能的方法：...
解决vue单页面 回退页面 keeplive 缓存问题
10-15
本文将详细讨论如何解决Vue单页面应用中回退页面时，`keep-alive` 缓存问题。 在Vue应用中，我们可能会遇到这样的场景：从A页面跳转到B页面，A页面需要保持其状态，例如查询条件和列表数据。当在B页面进行了一些...
解决vue 路由变化页面数据不刷新的问题
08-27
本篇文章将深入探讨如何解决Vue路由变化时页面数据不刷新的问题。 首先，我们需要理解Vue Router的工作原理。Vue Router采用的是单页面应用程序（SPA）模式，当路由改变时，视图（View）通常应该根据新的路由参数...
vue-router back 返回时携带参数
weixin_39729729的博客
09-08 8468
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 go(-1)后退时怎么带参数?
weixin_45614470的博客
07-21 3437
解决方案 声明一个空的Vue模块eventBus import Vue from 'vue' /** * 定义空的vue实例，作为 eventbus实现非父子组件之间的通信(vue2.x中去掉了broadcast) */ var eventBus = new Vue({}); export default eventBus; 通过eventBus.$emit传参给上一个页面 import eventBus from '../service/eventbus.js'; methods:{
vue 路由返回 go(-1) 携带参数
神膘护体小月半的博客
11-01 5820
vue 路由返回 go(-1) 携带参数
vue用编程式路由传递对象,目标页拿到数据后刷新页面后回退参数会丢失
莹儿的博客
07-15 699
原因: vue路由传递参数如果用params传递参数，那么页面刷新就会丢失数据，可以改用query来传递参数，这样刷新就不会丢失. 如果传递的是对象，注意要把对象转为字符串，否则刷新就会变为undefined了. 另外，二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示. 解决办法: 传递页:把传递的对象县转化为字符串 2.目标页:目标页接收参数并把字符串转化为对象 3.路由页:路径后面绑定数据
vue 返回上一页传参_vue.js页面刷新及后退参数丢失的解决方案
weixin_35431719的博客
12-29 1995
在使用vue开发的单页面项目中，会经常遇到点击列表传入参数进入详情页，当要打开某一项的详情页或者暂时离开列表页，再返回(后退时)，详情页获取的参数会全部丢失，页面同时也会报错，用户体验极度不友好。解决办法作一新求抖直微圈有三种：第一种方说础开数间行屏。标控近术第发据也商蔽最移法：用vue 的，即在外套一层。虽然可以达到一定效果，但是控制起来比较麻烦，因为项目中并不是所有的页面都需要缓存，这时候我们...
vue处理路由(params)和vuex传参刷新页面值清空问题
xiaolegeaizy的博客
04-30 4037
一、通过路由params传值 路由传值有两种方式，params和query，params传值刷新页面是要消失的，然而query却不会，两者的区别就在于query会把传递的参数显示在url地址中，就像这样：/adminUser/001001001?jum=001001001211，参数过多的话url地址会变得非常难看，如果你并不在意url地址难看与否，那么你可以不使用params，而是使用...
vue路由跳转页面带参数，刷新时页面参数丢失
喜欢做一些demo，和分享遇到的 BUG
09-25 1214
页面路由跳转传递参数方式： 注意 query里面的不要写对象，写具体的参数，不然传过去下一个页面后，参数刷新就会变成[object,object]。 具体的参数的值先用JSON.stringify转，再接受的时候转回来。 用JSON.parse把获取到的参数转。这样刷新就不会丢失了。 ...
vue从一个页面跳转到另一个界面，带参数跳转
yhl_nsd的博客
07-29 9783
使用编程式导航，一个页面跳转到另一个界面，并带参数跳转
vue3:页面回退上一页带好参数
最新发布
06-23
### Vue3 页面回退携带参数的实现方法 在 Vue3 中，页面回退到上一页并携带参数的功能可以通过 `sessionStorage` 或 `query` 参数来实现。以下是一个完整的解决方案： #### 方法一：使用 `sessionStorage` 存储参数 通过 `sessionStorage` 将参数存储在浏览器会话中，并在返回上一页时读取这些参数。 ```javascript // 当前页面（例如编辑页）在跳转前将参数存储到 sessionStorage 中 sessionStorage.setItem('returnParams', JSON.stringify({ key: 'value' })); // 上一页（例如列表页）在加载时从 sessionStorage 获取参数 onMounted(() => { const params = JSON.parse(sessionStorage.getItem('returnParams')); if (params) { console.log('接收到的参数:', params); // 清空 sessionStorage 中的数据 sessionStorage.removeItem('returnParams'); } }); ``` 这种方法的优点是参数不会直接显示在 URL 中，适合传递敏感或复杂的参数[^2]。 --- #### 方法二：使用 `query` 参数传递数据 通过路由的 `query` 参数传递数据，确保参数在 URL 中可见且可以被上一页接收。 ```javascript // 当前页面（例如编辑页）跳转时携带参数 const router = useRouter(); router.push({ path: '/previous-page', query: { key: 'value' } }); // 上一页（例如列表页）通过 useRoute 接收参数 <script setup> import { useRoute } from 'vue-router'; const route = useRoute(); onMounted(() => { const queryParams = route.query; console.log('接收到的参数:', queryParams); }); </script> ``` 这种方法的优点是简单直观，适合传递非敏感的简单参数[^1]。 --- #### 方法三：结合导航守卫实现回退逻辑 如果需要更复杂的回退逻辑，可以结合 `beforeRouteLeave` 和 `beforeRouteEnter` 导航守卫。 ```javascript // 当前页面（例如编辑页）设置导航守卫 <script setup> import { useRouter } from 'vue-router'; const router = useRouter(); const onClickBack = () => { router.go(-1); // 返回上一页 }; </script> // 上一页（例如列表页）通过 beforeRouteEnter 获取数据 <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ beforeRouteEnter(to, from, next) { next((vm: any) => { if (from.query.key) { vm.dataReceived = from.query.key; // 接收参数 console.log('接收到的参数:', vm.dataReceived); } }); }, }); </script> ``` 这种方法适用于需要对回退行为进行控制的场景[^4]。 --- #### 注意事项 1. 如果使用 `params` 而不是 `query`，需要注意刷新页面时参数可能会丢失。因此推荐使用 `query` 参数[^3]。 2. 在实际开发中，可以根据需求选择是否清空 `sessionStorage` 或清理 URL 中的参数。 --- ### 示例代码 以下是一个完整的示例，展示如何在 Vue3 中实现页面回退并携带参数： ```javascript // 编辑页：跳转前存储参数 sessionStorage.setItem('returnParams', JSON.stringify({ key: 'value' })); router.go(-1); // 列表页：加载时接收参数 <script setup> import { onMounted } from 'vue'; onMounted(() => { const params = JSON.parse(sessionStorage.getItem('returnParams')); if (params) { console.log('接收到的参数:', params); sessionStorage.removeItem('returnParams'); // 清空参数 } }); </script> ``` ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值