从单页面应用角度去解决不跳转页面,也能更改浏览器url地址

news2024/11/22 19:17:14

正常来说不刷新页面,也能更改浏览器url地址的方法有很多,我们在网上搜的话可以看到有pushState、replaceState、popstate等方法,那还有没有其他方法呢?
答案是有的!
最近做一个vue商城项目的时候,用户点击支付时,用户可复制当前链接(加上登录态),粘贴到第三方浏览器之后,完成整个支付闭环。话不多说,直接贴代码:

let url = window.location.href;
  let index = url.indexOf("?");
  if (index != -1) {
    window.location.href = url.substring(0, index);
  }
  window.location.href += `?_t=${_state.user.token}`;

有些人看到上面的代码,会有些疑问, window.location.href不是会使页面跳转了吗?当初我也是这么认为,后面我在网上搜了,才知道这个原因:
在这里插入图片描述
在这里插入图片描述

以上意思是,总体的意思就是假如浏览器url后面带有#, 使用window.location.href, 是无法跳转的,这个刚好是vue的单页面应用的一个特性!,所以利用这个特性,就可以实现不刷新页面,也能更改浏览器url地址

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1004744.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【KingFusion】如何设置日期控件默认选择最近24小时

哈喽,大家好,我是雷工! 本篇记录一个日期时间控件的使用过程,以下为应用笔记。 1、问题描述 KingFusion中,对于一些特定的查询情况下,需要设置日期时间控件默认显示前一天的日期时间到当前时间24小时内的…

2023/9/12 -- C++/QT

作业 实现一个图形类(Shape),包含受保护成员属性:周长、面积, 公共成员函数:特殊成员函数书写 定义一个圆形类(Circle),继承自图形类,包含私有属性&#xf…

数据结构题型3--按序查找

#include <iostream> //引入头文件 using namespace std;typedef int Elemtype;#define Maxsize 100 #define ERROR 0 #define OK 1typedef struct LNode {Elemtype data;//数据域struct LNode* next;//指针域 }LNode, * LinkList;bool InitList(LinkList& L) …

OpenCV(三十九):积分图像

1.积分图像介绍 积分图像中的每个像素表示了原始图像中对应位置及其左上方矩形区域内像素值的总和。如图&#xff0c;p0表示原始图像蓝色区域内像素值的总和。 倾斜求和&#xff08;Skewed Sum&#xff09;是积分图像的一种扩展形式&#xff0c;用于计算图像区域内的像素和&…

小白带你学习linux自动化运维ansible

目录 一、为什么要用自动化运维软件 二、自动化运维要注意的方面 1、管理机与被管理机之间的连接方式 2、服务器分组(主机清单) 3,、自动化运维的管理分类 三、常见的开源自动化运维软件 1、puppet 2、saltstack 3、ansible 四、自动化运维软件一般安装在哪 五、ans…

【栈与队列面试题】有效的括号(动图演示)

leetcode20.括号匹配问题 前言&#xff1a; &#x1f4a5;&#x1f388;个人主页:​​​​​​Dream_Chaser&#xff5e; &#x1f388;&#x1f4a5; ✨✨刷题专栏:http://t.csdn.cn/UlvTc ⛳⛳本篇内容:力扣上栈与队列的面试OJ题目 目录 leetcode20.括号匹配问题 1.问题描…

2023-9-12 多重背包问题(二)

题目链接&#xff1a;多重背包问题 II #include <iostream> #include <algorithm>using namespace std;const int N 12010, M 2010;int n, m; int v[N], w[N]; int f[M];int main() {cin >> n >> m;// 最后一共转换成多少个物品int cnt 0;for(int i…

Rust通用编程概念(3)

Rust通用编程概念 1.变量和可变性1.执行cargo run2.变量3.变量的可变性4.常量5.遮蔽5.1遮蔽与mut区别1.遮蔽2.mut 2.数据类型1.标量类型1.1整数类型1.2浮点数类型1.3数字运算1.4布尔类型1.5字符类型 2.复合类型2.1元组类型2.2数组类型1.访问数组2.无效的数组元素访问 3.函数3.1…

9月12日作业

作业代码 #include <iostream>using namespace std;class Shape { protected:double cir;double area; public://无参构造Shape() {cout<<"无参构造"<<endl;}//有参构造Shape(double c, double a):cir(c), area(a){cout<<"有参构造&quo…

Maven Helper mvn项目冲突如何解决

一般用这款插件来查看maven的依赖树。 一、安装&#xff1a; File-->setting--->Plugins--->在搜索框中填写Maven Helper然后搜索&#xff0c;单击Install按钮进行安装&#xff0c;装完重启IDE。 二、使用 当Maven Helper 插件安装成功后&#xff0c;打开项目中的p…

【算法基础】时间复杂度和空间复杂度

目录 1 算法的评价 2 算法复杂度 2.1 时间复杂度&#xff08;Time Complexity&#xff09; 2.1.1 如何计算时间复杂度&#xff1a; 2.1.2 常见的时间复杂度类别与示例 2.2 空间复杂度 2.2.1 如何计算空间复杂度 2.2.2 常见的空间复杂度与示例 3 时间复杂度和空间复杂度…

docker 部署 node.js(express) 服务

1、在 express 项目根目录下新增 Dockerfile 文件&#xff0c;内容如下&#xff1a; 创建服务容器的方法&#xff0c;可以根据自己的情况选择&#xff1a; 1、以下示例为宿主机没有安装 node 环境的写法&#xff1b; 2、先在本地构建包含 node 和 express 的基础镜像&#xff0…

【C++】day5学习成果:继承和六个特殊成员函数的代码应用、静态成员 继承 类的关系模型 类的继承步骤的思维导图。

1.代码题&#xff1a;实现一个图形类&#xff08;Shape&#xff09;&#xff0c;包含受保护成员属性&#xff1a;周长、面积&#xff0c; 公共成员函数&#xff1a;特殊成员函数书写 定义一个圆形类&#xff08;Circle&#xff09;&#xff0c;继承自图形类&#xff0c;包含私有…

STC15/8单片机特有的PWM寄存器和普通定时器实现PWM输出

STC15/8单片机特有的PWM寄存器和普通定时器实现PWM输出 🌿主要针对STC15W4型号特有的6通道15位专门的高精度PWM。 🌿STC8系列 ✨STC15W4K32S4系列单片机具有6通道15位专门的高精度PWM(带死区控制)和2通道CCP(利用它的高速脉冲输出功能可实现11~16位PWM);(STC15F/L2K60S2系…

JAVA8接口使用问题

JAVA8接口使用问题 文章目录 JAVA8接口使用问题1、默认方法冲突问题&#xff08;1&#xff09;亲爹优先原则&#xff08;2&#xff09;左右为难 2、常量冲突问题 1、默认方法冲突问题 &#xff08;1&#xff09;亲爹优先原则 当一个类&#xff0c;既继承一个父类&#xff0c;…

助力智能化公路养护,基于YOLOv5s集成SPD-BIFPN-SE开发构建公路开裂检测识别系统

在前文中我们尝试构建了在隧道、涵洞尝尽下的自动智能化养护巡查相关的模型&#xff0c;进行了实地测试评估&#xff0c;感兴趣的话可以自行移步阅读即可&#xff1a; 《基于轻量级YOLOv5s开发构建隧道基建裂痕、脱落等缺陷问题检测系统》 本文的想法是相近的&#xff0c;核心…

Linkerd2初探

Linkerd2初探 部署环境Linkerd简介安装Linkerd客户端在k8s上安装Linkerd控制平面&#xff08;服务端&#xff09;实验&#xff1a;数据平面代理注入demo应用安装viz插件&#xff08;可视化面板&#xff09;部署grafana 其他 部署环境 k8s环境: KIND 模拟kubernetes 1.21.1 kub…

页面设计都有哪些好用的工具推荐?

对于设计师来说&#xff0c;方便的页面设计工具和稳定的页面设计灵感也同样重要。 在今天的信息爆炸中&#xff0c;很容易找到页面设计工具&#xff0c;网上搜索有很多建议&#xff0c;但找到合适的页面设计工具并不那么简单。 本文推荐不容错过的9款页面设计工具 即时设计 …

【DevOps核心理念基础】3. 敏捷开发最佳实践

一、敏捷开发最佳实践 1.1 项目管理 1.2 需求管理 1.3 技术架构 1.4 技术开发 1.5 测试 二、敏捷开发最佳实践 2.1 敏捷开发的执行细节 三、全面的DevOps工具链 四、版本控制和协作开发工具 4.1 集中式版本控制工具 4.2 分布式版本控制工具 一、敏捷开发最佳实践 …

mysql的一些知识点或者说踩过的坑和想记住的内容

快速上传数据 这个应该是比inset into values更快的插入数据的办法了。 不过要求挺苛刻的&#xff0c;数据要整理成和表格一致&#xff0c;也就是说每条数据都是完整的一条&#xff0c;而不是一部分。 下面的示例我以***为分割符划分字段&#xff0c;以 \n来分割每条数据。 LO…