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

2023-10-10 07:30

本文主要是介绍Vue项目中常见问题(39)路由传递参数结合回话存储,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

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:

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

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

如果我们以query的方式来带这个对象的参数的话,可以是可以,但是我们会发现有恶心,这地址栏

会话存储

所以我们选择用另外的方式来带参,那就是会话存储

 我们这里只用qeury参数带上购买商品的数量,这样简洁一点

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

我们利用会话存储来传递数据

但是我们传递的数据是对象形式还是字符串形式呢?答案是字符串形式的,有的朋友不相信,那我在这里给大家验证一下,传递对象会怎么样?

在pages/Detail/index.vue中:

 在pages/AddCartSuccess/index.vue中:

这个组件是拿数据

 控制台查看,我们发现其实拿不到数据

 

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

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

把对象转字符串

测试:

 控制台打印的结果也是字符串

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

 

 我们在控制台中可以看到:

数据已经存储在AddCartSuccess中了 

 3.数据放到页面中:

在pages/AddCartSuccess/index.vue中:

 效果:

至此功能实现了

 

这篇关于Vue项目中常见问题(39)路由传递参数结合回话存储的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/178956

相关文章

SpringBoot项目删除Bean或者不加载Bean的问题解决

《SpringBoot项目删除Bean或者不加载Bean的问题解决》文章介绍了在SpringBoot项目中如何使用@ComponentScan注解和自定义过滤器实现不加载某些Bean的方法,本文通过实... 使用@ComponentScan注解中的@ComponentScan.Filter标记不加载。@C

Linux中Curl参数详解实践应用

《Linux中Curl参数详解实践应用》在现代网络开发和运维工作中,curl命令是一个不可或缺的工具,它是一个利用URL语法在命令行下工作的文件传输工具,支持多种协议,如HTTP、HTTPS、FTP等... 目录引言一、基础请求参数1. -X 或 --request2. -d 或 --data3. -H 或

javafx 如何将项目打包为 Windows 的可执行文件exe

《javafx如何将项目打包为Windows的可执行文件exe》文章介绍了三种将JavaFX项目打包为.exe文件的方法:方法1使用jpackage(适用于JDK14及以上版本),方法2使用La... 目录方法 1:使用 jpackage(适用于 JDK 14 及更高版本)方法 2:使用 Launch4j(

使用JavaScript操作本地存储

《使用JavaScript操作本地存储》这篇文章主要为大家详细介绍了JavaScript中操作本地存储的相关知识,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下... 目录本地存储:localStorage 和 sessionStorage基本使用方法1. localStorage

Docker集成CI/CD的项目实践

《Docker集成CI/CD的项目实践》本文主要介绍了Docker集成CI/CD的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录一、引言1.1 什么是 CI/CD?1.2 docker 在 CI/CD 中的作用二、Docke

SpringBoot项目引入token设置方式

《SpringBoot项目引入token设置方式》本文详细介绍了JWT(JSONWebToken)的基本概念、结构、应用场景以及工作原理,通过动手实践,展示了如何在SpringBoot项目中实现JWT... 目录一. 先了解熟悉JWT(jsON Web Token)1. JSON Web Token是什么鬼

手把手教你idea中创建一个javaweb(webapp)项目详细图文教程

《手把手教你idea中创建一个javaweb(webapp)项目详细图文教程》:本文主要介绍如何使用IntelliJIDEA创建一个Maven项目,并配置Tomcat服务器进行运行,过程包括创建... 1.启动idea2.创建项目模板点击项目-新建项目-选择maven,显示如下页面输入项目名称,选择

Jenkins中自动化部署Spring Boot项目的全过程

《Jenkins中自动化部署SpringBoot项目的全过程》:本文主要介绍如何使用Jenkins从Git仓库拉取SpringBoot项目并进行自动化部署,通过配置Jenkins任务,实现项目的... 目录准备工作启动 Jenkins配置 Jenkins创建及配置任务源码管理构建触发器构建构建后操作构建任务

如何用Java结合经纬度位置计算目标点的日出日落时间详解

《如何用Java结合经纬度位置计算目标点的日出日落时间详解》这篇文章主详细讲解了如何基于目标点的经纬度计算日出日落时间,提供了在线API和Java库两种计算方法,并通过实际案例展示了其应用,需要的朋友... 目录前言一、应用示例1、天安门升旗时间2、湖南省日出日落信息二、Java日出日落计算1、在线API2

详解Spring Boot接收参数的19种方式

《详解SpringBoot接收参数的19种方式》SpringBoot提供了多种注解来接收不同类型的参数,本文给大家介绍SpringBoot接收参数的19种方式,感兴趣的朋友跟随小编一起看看吧... 目录SpringBoot接受参数相关@PathVariable注解@RequestHeader注解@Reque