Vue项目中常见问题(39)路由传递参数结合回话存储

最新推荐文章于 2024-06-11 16:54:09 发布
最新推荐文章于 2024-06-11 16:54:09 发布
阅读量808 收藏
点赞数
分类专栏： vue前台管理项目 文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46368050/article/details/124905032
版权
本文探讨在Vue项目中如何结合路由参数和会话存储来传递复杂对象，详细介绍了从Detail页面到AddCartSuccess页面的数据传递过程，包括对象转字符串存储、会话存储的使用以及数据在页面中的展示。
摘要由CSDN通过智能技术生成

目录

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

面试题:

浏览器的存储功能是HTML5中新增的,分为本地存储和会话存储

本地存储:持久化的 ----存储数据上线5M左右

会话存储:并非持久化的----会话结束数据就消失

本地存储|会话存储,一般存储的是字符串

业务需求1:

会话存储

 思考:我们怎么把detail中详情的数据给到addcartsuccess?

 所以本地存储和会话存储不可以存对象,我们要把对象变成字符串存储,拿到字符串以后,我们在转对象

  1.在pages/Detail/index.vue中:

  2.在pages/AddCartSuccess/index.vue中:

  3.数据放到页面中:

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

大家根据上传历史进行查找你需要的代码

 

面试题:

浏览器的存储功能是HTML5中新增的,分为本地存储和会话存储

本地存储:持久化的 ----存储数据上线5M左右

会话存储:并非持久化的----会话结束数据就消失

本地存储|会话存储,一般存储的是字符串

 

业务需求1:

我们会发现我们点击加入购物车的商品和购物车中的商品不一样,因为我们购物车中的商品数据其实是写死了的,所以我们要进行路由传参,也可以不进行路由传参,我们在购物车里面再发一次请求,其实没有必要,因为我们在商品详情页已经拿到了商品的数据,我们直接传给购物车直接使用就行,没必要再发请求获取数据

注意,我们以前路由传参,传的都是一些数字什么的,都比较简单,而这次我们要传的是一个对象s

最低0.47元/天 解锁文章
学无止境QAQ
关注
专栏目录
详解vue嵌套路由-query传递参数
08-30
在这种情况下，我们需要在父路由中传递参数给子路由，以便子路由可以正确地渲染内容。 现在，让我们看看如何使用 query 来传递参数。在 Vue 中，我们可以使用 `$route.query` 对象来访问当前路由的 query 参数。...
路由传参结合数据请求
09-06
web前端 中
Vue.js 2和vue-router 2的路由器存储和解决方案
cuk5340的博客
07-20 587
Vue路由器存储 (vue-router-storage) A solution to the Vue history routing Persistence. Vue历史记录路由持久性的解决方案。 警告：当前版本仅支持历史记录模式！ (Warn：Current Version Just Support The History Mode!) 当前功能 (Current function)...
Vue将数据存放在会话存储中
zxcvb0825的博客
01-06 753
（session Storage）：当浏览器被关闭的时候，存在session中的数据就会消失。（local Storage）：在本地存储的数据会永远保留，除非你自己删除，要不然一直在。
Vue学习：存入会话缓存
utoui的博客
01-29 504
sessionStorage ①存数据： window.sessionStorage.setItem('token','success') token :键值 success:值 ②取数据 window.sessionStorage.getItem("token") 路由导航守卫 防止没有登录状态直接访问其他页面 // 挂载路由守卫 router.beforeEach(((to, from, next) => { //to 将要访问的路径 //from 来自哪个路径
Vue中路由详解
weixin_55896343的博客
10-26 1075
理解：一个路由（route）就是一组映射关系（key-value）,多个路由器需要路由器进行管理。前端路由：key是路径，value是组件​1.params传参：格式： < router-link to = " detail/2 " > 娱乐新闻 娱乐新闻 ="
vue中监听路由参数的变化及方法
12-13
在vue项目中，假使我们在同一个路由下，只是改变路由后面的参数值，期望达到数据的更新。 mounted: () =>{ this.id = this.$route.query.id; this.getdetail() } getDetail()方法中会用到this.id这个参数，在同一...
浅谈vue-router2路由参数注意的问题
11-27
1、vue 路由 如果传递 params 定义路由的时候是 /路由名称：id 获取的时候 ...以上这篇浅谈vue-router2路由参数注意的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多
vue会话存储的形式传递值
lxw621的博客
05-20 219
用于临时保存针对一个窗口(或标签页)的数据。在访客关闭窗口或者标签页之前，这些数据是存在的，而关闭之后就会被浏览器删除。在左侧需要sessionStorage.setItem("名",JSON.stringify(传递的值))用于长期保存网站的数据，并且站内任何页面都可以访问该数据。右侧接收JSON.parse(sessionStorage.getItem('名'));JSON.parse将JSON格式字符串转换为js对象。总之 简单的数据使用会话存储，页面关闭就丢失数据。
“会话”存储
ruby-j
07-31 205
在存储你的“会话”数据时，Rails 有很多选项。每个选项即好也不好。我们先列出选 项的清单，然后再比较它们。 “会话”存储机制使用DEFAULT_SESSION_OPTIONS 哈希表的:database_manager 参数设 置。其它的选择是： 1、:database_manager => CGI::Session::Pstore 这是Rails 使用的缺省“会话”存储 机制。每个...
VueRouter中存储路由的参数是什么？
湖北太米网络科技有限公司
12-12 808
是一个Vue.js官方的路由管理器，它可以帮助我们在Vue.js应用中实现页面之间的导航和跳转。它提供了一系列的API和配置选项，使得我们可以更加灵活地管理和控制应用的路由。​在VueRouter中，存储路由的参数主要是通过路由对象来实现的。每当我们进行路由导航时，VueRouter会将匹配到的路由信息保存在一个路由对象中，这个路由对象包含了许多属性，比如当前路由的路径、参数、查询参数、hash值等。我们可以通过访问这些属性来获取和操作路由参数。​。
如何在Vue3中使用sessionStorage保存会话数据？
最新发布
有我更精彩的博客
06-11 1959
是Web Storage API的一部分，它用于在客户端存储数据，仅在一个会话期间有效。这意味着当用户关闭浏览器或当前标签页时存储的数据会被清空。数据只在同一会话窗口中可用。只在同一窗口或选项卡中可用，窗口或选项卡关闭后数据被清除。在这篇文章中，我们探讨了如何在Vue3项目中使用保存和加载会话数据。通过使用，我们可以在用户会话期间存储数据，提供更好的用户体验。web前端高频面试题_在线视频教程-CSDN程序员研修院最后问候亲爱的朋友们，并邀请你们阅读我的全新著作。
【vue】vue本地储存、会话存储插件vue-ls的使用：
SunPeng的博客
10-22 1385
【vue】vue本地储存、会话存储插件vue-ls的使用：；jeecg存储插件vue-ls
shiro的会话存储/持久化SessionDAO
zsg88的专栏
06-28 1万+
Shiro提供SessionDAO用于会话的CRUD，即DAO（Data Access Object）模式实现：
vue浏览器返回监听
热门推荐
不求甚解的博客
08-14 4万+
分享页面时，希望点击浏览器回退按钮，回到项目首页，增加访问量。 需要监听浏览器的回退按钮，并阻止其默认事件。 具体步骤如下： 1、挂载完成后，判断浏览器是否支持popstate mounted(){ if (window.history &amp;&amp; window.history.pushState) { history.pushState(null, null, d...
vue2登录存储案例：sessionStorage会话存储+localStorage本地存储
欢迎来到长风沛雨的博客
07-10 3157
vue2，登录案例，登陆后数据存在本地
【Vue】本地存储(LocalStorage)和会话存储(SessionStorage)
游坦之的博客
04-30 1万+
存储的四个方法 1、存储 localStorage.setItem(key, value); key和value都必须是字符串。 例如：存储数据 【效果图】 【问】如果要传一个对象该怎么办？ 如果直接将对象作为value放进去，会出现这样的现象 用JSON（JSON.stringify() ）转换一下，将对象先转化成字符串，如下 然后就可以将对象，存进去了 2、读取localStorage.setItem(key） 例如：读取存储的数据 【效果图】...
本地存储 和 回话存储
weixin_30768661的博客
06-07 101
本地存储 storage/localstorage回话存储 windowSession各不相同 转载于:https://www.cnblogs.com/qinqiu/p/9150437.html
SpringBoot/VUE路由参数传递详解与代码示例
在Spring Boot和Vue.js项目中，路由传递参数是前端开发中的常见需求。本文将详细介绍两种常见的参数传递方式：URL路径参数和查询参数，并提供相应的代码示例来展示如何在Spring Boot的RESTful API控制器和Vue.js的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值