网页自动跳转到其他页面,点击浏览器返回箭头,回不到原来页面的问题

背景:今天产品提个需求,需要从index页面自动触发跳转到下一页面的事件,从而不做任何操作,直接跳转到test页面。
代码是这样的:
index.vue:

<template>
  <div style="width:500px;height:600px;background-color: aqua;">
    <el-button @click="toNext">下一页</el-button>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const toNext = () => {
  router.push({ path: '/quotaControl/test' })
}

// 到此页面后间隔5S自动跳转到下一页面
onMounted(() => {
  setTimeout(() => {
    toNext()
  }, 5000)
})
</script>

在这里插入图片描述

test.vue:

<template>
  <div>test页面</div>
  <el-button @click="toBack">回到上一页</el-button>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const toBack = () => {
  router.go(-1)
}
</script>

在这里插入图片描述

如果在index页面,不做任何点击事件,直接等到5秒跳转到test页面,这个时候点击浏览器左上角回退按钮,是回退不到index页面的。这个是浏览器的机制,但其实history是存了Index页面的路由,如果此时不点击浏览器的回退按钮,而是直接点击test页面的‘回到上一页’按钮,是能返回到原来页面的。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

(三)Servlet教程——Tomcat安装与启动

首先打开浏览器在浏览器地址栏中输入清华大学开源软件镜像站地址&#xff0c;地址如下 https://mirrors.tuna.tsinghua.edu.cn/ 输入地址后回车会出现如下图所示的界面 在该界面找tomcat不是很好找&#xff0c;在搜索框中输入apache然后回车&#xff0c;输入apache后并回车后出…

WebSocket的原理、作用、API、常见注解和生命周期的简单介绍,附带SpringBoot示例

文章目录 原理作用客户端 API服务端 API生命周期常见注解SpringBoot示例 WebSocket是一种 通信协议 &#xff0c;它在 客户端和服务器之间建立了一个双向通信的网络连接 。WebSocket是一种基于TCP连接上进行 全双工通信 的 协议 。 WebSocket允许客户端和服务器在 单个TCP连接上…

AI道路交通违章智能抓拍系统解决方案

项目概述 背景 目前&#xff0c;XX市市全市民用汽车保有量94.62万辆&#xff0c;比上年末增长15.9%&#xff0c;其中私人汽车保有量35.48万辆&#xff0c;减少0.01%。轿车保有量39.45万辆&#xff0c;增长82.1%&#xff0c;其中私人轿车38.65万辆&#xff0c;增长82.1%。电动自…

【项目实战】基于高并发服务器的搜索引擎

【项目实战】基于高并发服务器的搜索引擎 目录 【项目实战】基于高并发服务器的搜索引擎搜索引擎部分代码index.htmlindex.hpplog.hppparser.cc&#xff08;用于对网页的html文件切分且存储索引关系&#xff09;searcher.hpputil.hpphttp_server.cc&#xff08;用于启动服务器和…

免费https证书申请

HTTPS证书&#xff0c;也称为SSL证书&#xff08;Secure Sockets Layer&#xff09;或TLS证书&#xff08;Transport Layer Security&#xff09;&#xff0c;是一种数字证书&#xff0c;用于在互联网通信中确保数据传输的安全性、完整性和真实性。它是基于公钥基础设施&#x…

VirtualFlow亮相核反应堆技术全国重点实验室2024学术年会

为加强先进核能技术领域科技创新与应用&#xff0c;核反应堆技术全国重点实验室及先进核能技术全国重点实验室2024年学术年会在四川成都启幕&#xff0c;9名院士和近百家科研院所、高校和企业等近700名专家学者齐聚一堂&#xff0c;聚焦和探讨核反应堆及先进核能重大基础理论和…

RAG开山之作:结合参数化与非参数化记忆的知识密集型NLP任务新解法

20年RAG刚提出时的论文&#xff1a;Retrieval-Augmented Generation for Knowledge-Intensive NLP Tasks&#xff0c;也算是RAG的开山之作之一了。 摘要&#xff1a;检索增强生成&#xff08;RAG&#xff09;方法结合了预训练语言模型与基于检索的非参数化记忆&#xff0c;通过…

正整数的性质:和与根

目录 数字和 数字和介绍 数字和简单应用 哈沙德数 最小元素各数位之和 数字根 数字根介绍 数字根简单应用 数字和 数字和介绍 简单来说&#xff0c;数字和即一个整数数字每一位数值相加求和所得的值&#xff0c;数字和可以为任意正整数&#xff0c;使用代码获取一个数值的数字和…

Git笔记-配置ssh

Git在Deepin中的ssh配置 一、环境二、安装1. 查看GitHub账户2. 配置 git3. 生成 ssh key 三、配置 一、环境 系统&#xff1a; Deepin v23 Git仓库&#xff1a;GitHub 二、安装 1. 查看GitHub账户 在设置界面看到自己的邮箱&#xff0c;这个邮箱就是后面会用到的邮箱 2. …

在Java中使用XxlCrawler时防止被反爬的几种方式

目录 前言 一、常见的反爬措施 1、User-Agent识别 2、Referer识别 3、频率限制 4、IP限制 二、XxlCrawer的应对之道 1、User-Agent应对 2、频率限制 3、IP限制 三、XxlCrawler执行解析 1、XxlCrawler对象 2、启动对象 3、信息爬取线程 总结 前言 众所周知&#x…

LAMMPS单层石墨烯建模

本文主要介绍两种晶胞建模方式。 一、Z形晶胞 晶胞分析&#xff1a;a1沿水平x轴方向&#xff0c;a2沿垂直y轴方向。石墨烯是二维结构&#xff0c;a3取小于单层石墨烯厚度。假设石墨烯键长L1.421&#xff0c;则a13L&#xff0c;a21.732L&#xff0c;a32L&#xff08;低于3.35即…

IDEA离线安装插件

1、下载地址 https://plugins.jetbrains.com/idea 如果去其他编辑器&#xff0c;点击下拉&#xff0c;选择即可。 2.搜索 在输入框输入关键词&#xff0c;按照提示选择即可&#xff0c;点击搜索按钮&#xff0c;查看结果。 3、选择版本 按照自己的版本选择合适的版本 4、安…

探索比特币符文热:市场趋势与持续性分析

在加密货币世界中&#xff0c;比特币一直是备受关注的焦点之一。然而&#xff0c;近年来&#xff0c;随着DeFi&#xff08;去中心化金融&#xff09;的兴起&#xff0c;一种新的潮流开始崭露头角——比特币符文。本文将探讨比特币符文的兴起&#xff0c;分析市场趋势&#xff0…

FTP与SMB深度对比:文件传输协议谁更胜一筹?

在数字化时代&#xff0c;文件传输已成为日常工作中不可或缺的一部分。 FTP&#xff08;文件传输协议&#xff09;和SMB&#xff08;服务器消息块&#xff09;是两种最为常见的文件传输协议。它们各自在文件传输领域拥有独特的优势和特点&#xff0c;但同时也存在一些差异。 今…

【学习】软件测试自动化,是未来的趋势还是当前的必需

在当今快速迭代的软件开发周期中&#xff0c;速度和质量成为了企业生存的关键。随着DevOps实践的普及和持续集成/持续部署&#xff08;CI/CD&#xff09;流程的标准化&#xff0c;软件测试自动化已经从未来的趋势转变为当前的必要性。本文将探讨自动化测试的现状、必要性以及其…

C基础语法速览

叠甲&#xff1a;以下文章主要是依靠我的实际编码学习中总结出来的经验之谈&#xff0c;求逻辑自洽&#xff0c;不能百分百保证正确&#xff0c;有错误、未定义、不合适的内容请尽情指出&#xff01; 文章目录 1.数据类型1.1.数据类型的常见分类1.2.数据类型的符号修饰1.3.数据…

W801学习笔记十一:掌机进阶V3版本之硬件改造

经由前面的笔记&#xff0c;我们打造出了一款游戏掌机。 W801学习笔记十&#xff1a;HLK-W801制作学习机/NES游戏机(总结) 然而&#xff0c;考虑到后续的游戏开发&#xff0c;总是忧心容量不足。故而&#xff0c;在正式展开软件开发工作以前&#xff0c;最终进行一下升级改造…

百面算法工程师 | 激活函数 Activate Function

目录 10.1激活函数作用&#xff1a; 10.2 为什么激活函数都是非线性的 10.3 常见激活函数的优缺点及其取值范围 10.4 激活函数问题的汇总 10.4.1 Sigmoid的缺点&#xff0c;以及如何解决 10.4.2 ReLU在零点可导吗&#xff0c;如何进行反向传播 10.4.3 Softmax溢出怎么处…

当贝D6X和坚果N1 Air高亮版哪个好?参数对比,教你怎么选

当贝在4月18日的春季新品发布会上推出了首款三色激光投影仪——当贝D6X。这款D6X系列的新品不仅采用了一体式灵动云台&#xff0c;还首创“AI灵动屏”&#xff0c;一经发布就引发热议。那么&#xff0c;当贝D6X的实力究竟如何呢&#xff1f; 我们通过同价位的当贝D6X和坚果N1 A…

Vue+Echarts 实现中国地图和飞线效果

目录 实现效果准备 实现效果 在线预览&#xff1a;https://mouday.github.io/vue-demo/packages/china-map/dist/index.html 准备 高版本的echarts&#xff0c;不包含地图数据&#xff0c;需要自己下载到项目中 1、地图数据下载 https://datav.aliyun.com/portal/school/at…