vue跳转路由时，带参数为数组，刷新后数组错误

最新推荐文章于 2024-07-27 11:33:23 发布
最新推荐文章于 2024-07-27 11:33:23 发布
阅读量2.5k 收藏 4
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43103581/article/details/100652553
版权

1、跳转路由时，带入参数，将数组转换为字符串

 this.$router.push({path: '/edit', query: {data: JSON.stringify(this.arr}}})

2、接收参数

>this.datas = JSON.parse(this.$route.query.data)
qq_43103581
关注
Vue - 完美解决 Router 路由跳转传参（对象 / 数组）目标页面刷新后参数丢失问题，无论如何刷新页面参数都会存在不会消息的解决方案（详细示例代码，一键复制运行）
王佳斌
03-23 4792
前言 例如，有个列表页，点击后携带参数进入详情页，当刷新详情页后，携带的参数就获取不到了。 我们要的是，无论怎么刷新目标页面， 都不会出现获取不到的情况，如下图所示： 解决方案 如果通过 query 的方式传递对象或数组，在地址栏中会被强制转换成 [object Object]，所以获取不到。 但您可以通过将对象参数，通过 JSON.stringify() 方法进行转换， 在接收页（目标页）使用 JSON.parse() 再转回来。 // 列表页 const data = { type: 'a1
Vue路由传参 (params query )
lwg112233的博客
09-02 1228
1.1. vue路由传参有3方法实现中： 1.编程式导航 ，2.声明式导航, 3.字符串拼接 一.编程式导航 : 1.在router-link标签中的to属性中定义要去的页面 <!-- router-link --> <router-link :to="{path:'/detail',query:{_id:item.id}}"> <van-card v-fo...
vue 跳转连接 传递数组
qq_43103581的博客
08-21 1611
跳转时，带入参数 this.$router.push({path: '/editName', query: {dataName: this.checkMultip}}) 接收参数 created () { this.data = this.$route.query.dataName console.log(this.data) } ...
Vue中实现路由跳转传参的4种方式
msq6678的博客
07-27 2870
Vue路由
vue地址栏路由传参 参数为数组时刷新页面变为字符串 处理方案
不积跬步何以至千里
05-28 4828
1.路由跳转传参 重点 accountIdList:JSON.stringify(row.accountIdList) reportConfigurationDetail: function(row){ this.$router.push({path:'/operationKpiConfigurationManagement/reportConfiguration/',query: {reportId: row.id,companyId:row.companyId,reportDate:row.repo
Vue页面跳转+传递参数
chd_sun的博客
08-29 4021
1.路径传值 1.关于如何在vue页面跳转并且传递参数 1.1.使用Menu 导航菜单 通过iView插件导入Menu 导航菜单：如下图 菜单的代码，其中在method方法下通过if判断使用路由来跳转到相应的页面 <template> <div class="layout"> <Layout :style="{minHeight: '100...
vue，下级页面刷新导致路由跳转带过来的数据消失的解决方法
weixin_34126215的博客
12-20 494
if(typeof(this.$route.query.result)=='string'){ //刷新时走这 }else{ //正常路由跳转过来后就把数据塞到 localStorage let obj = JSON.stringify(this.$route.query); //转化为JSON字符串 localStorage.setItem("prizeResult...
vue-router路由参数刷新消失的问题解决方法
08-30
路由参数刷新消失的问题解决方法是 vue-router 中常见的问题，本篇文章将为您提供四种解决方案。 解决方案一：Session & 服务器渲染 传统的解决方案是使用 Session 和服务器渲染。在登录页和主页是单独的两个页面...
vue 解决addRoutes动态添加路由后刷新失效问题
08-27
Vue 中解决 addRoutes 动态添加路由后刷新失效问题 在 Vue 项目中，我们经常需要使用 addRoutes 动态添加路由，但是在刷新页面后，这些动态添加的路由就会失效。下面我们来介绍如何解决这个问题。 应用场景 在...
解决vue 路由变化页面数据不刷新的问题
08-27
本篇文章将深入探讨如何解决Vue路由变化时页面数据不刷新的问题。 首先，我们需要理解Vue Router的工作原理。Vue Router采用的是单页面应用程序（SPA）模式，当路由改变时，视图（View）通常应该根据新的路由参数...
VUE-路由详解
damadashen的博客
05-14 2898
介绍VUE路由及使用，简单介绍动态路由、嵌套路由、编程式的路由及命名路由的使用
Vue路由传参（使用query传参页面刷新数据丢失问题）
...
04-10 1450
vue路由传参（使用query传参页面刷新数据丢失问题）
Vue路由和组件库
weixin_63473024的博客
03-03 977
vue路由 1-什么是路由 --路径与组件之间的关系 2-为什么使用路由---在一个页面中切换业务场景.所有的功能在一个页面上实现,利用路由的功 能实现不切换页面进行局部刷新,实现极高的体验感,开发效率高,数据传递容易,这就是前端 路由的作用 3-缺点 --开发成本高 需要学习专门的知识 首次加载的时候比较慢,不利于seo 一-基本使用 1--安装 ==> yarn add v...
Vue中this.$router.push（参数） 实现页面跳转并接收参数
m0_65360496的博客
12-22 1686
Vue中this.$router.push（参数） 实现页面跳转并接收参数加传递对象数据并接收
Vue - 基本路由的使用
Welkin_qing的博客
08-10 4805
一、导入包 注意：导入的包要在vue下边 &amp;amp;amp;amp;lt;title&amp;amp;amp;amp;gt;基本路由的使用&amp;amp;amp;amp;lt;/title&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;script src=&amp;amp;amp;quot;./lib/vue-2.4.0.js&amp;amp;amp;quot;&amp
Vue中this.$router.push传参方式有哪些
情非得已小猿猿
05-31 7325
1.params传参： var id = this.tableDate[index].id; this.$router.push({name:'testResult',params:{id:id}}); //目标页面接受参数 let id = this.$route.params.id 路由动态传参： //路由 { path: '/pay/:sellerId', compon...
vue 页面跳转 传数组
不积跬步何以至千里
07-24 6155
遇到的问题：注册页面需要调查询公司id接口，但我写在mounted里面导致，登录页面那边 点击注册新账号 跳转不了。 解决方案：那我就换了种方案 在点击注册新账号的时候 就去触发接口 然后页面跳转的时候 传数组 就既能跳转 还能接收到值 一举两得 具体实施：1.登录界面 点击注册新账号 2.注册界面 接收值 ...
详解vue 路由跳转四种方式 (带参数)
热门推荐
Free雅轩的博客
03-07 1万+
本文介绍了vue 路由跳转四种方式 (带参数)，本文通过实例代码给大家介绍的详细，具有一定的参考借鉴价值,需要的朋友可以参考下 1. router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始
vue项目 url中传递数组参数
qq_53836672的博客
05-05 2816
问题 我在项目中使用了一个iframe，引入另一个项目，想通过动态修改iframe的src使iframe中的页面动态展示，在这个过程中，我碰到了一个问题，就是我往url传递数组参数的时候，接受到的是[object object]，这使我读不出我传递的参数 【解决方案】 传递参数的页面 let testArray = [{a:1},{b:2},{c:3}]; let testStr = encodeURIComponent(JSON.stringify(footerData)); iframeSrc
vue3点击路由跳转
最新发布
09-04
在Vue3中，实现点击路由跳转通常会涉及到Vue Router库的使用。Vue Router是一个用于管理单页面应用（SPA）的路由组件，它允许你在不同URL之间切换内容而无需刷新整个页面。 以下是一个简单的示例，展示如何在组件中通过`@click`事件跳转到另一个路由： 1. 首先，在项目中安装Vue Router： ```bash npm install @vue/router ``` 2. 在main.js或者App.vue文件中配置路由： ```javascript import { createRouter, createWebHistory } from '@vue/router'; const routes = [ // 你的路由配置... ]; const router = createRouter({ history: createWebHistory(), // 使用浏览器的history API routes, }); // 然后将router挂载到App.vue或其他合适的组件上 app.mount('#app', router); ``` 3. 在需要跳转的组件模板中添加点击导航： ```html <template> <button @click="goToRoute('your-route-name')">跳转</button> </template> <script> export default { methods: { goToRoute(routeName) { this.$router.push({ name: routeName }); // 或者 path: '/route' } } } </script> ``` 这里，`'your-route-name'`应该是你之前在routes数组中定义的路由名称或路径。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值