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

news2024/11/15 19:32:07

背景:今天产品提个需求,需要从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页面的‘回到上一页’按钮,是能返回到原来页面的。

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

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

相关文章

20 Debian如何配置DNS服务(2)主从服务器

作者&#xff1a;网络傅老师 特别提示&#xff1a;未经作者允许&#xff0c;不得转载任何内容。违者必究&#xff01; Debian如何配置DNS服务&#xff08;2&#xff09;主从服务器 《傅老师Debian小知识库系列之20》——原创 前言 傅老师Debian小知识库特点&#xff1a; 1、…

纸箱码垛机:从传统到智能,科技如何助力产业升级

随着科技的飞速发展&#xff0c;传统工业领域正经历着一场重要的变革。作为物流行业重要一环的纸箱码垛机&#xff0c;其从传统到智能的转型升级&#xff0c;不仅提高了生产效率&#xff0c;还大幅降低了人工成本&#xff0c;为产业升级提供了强大助力。星派将探讨纸箱码垛机的…

【一些神金】怎么缓解工作压力?使用VS-code彩虹屁插件

怎么缓解工作压力&#xff1f; 其实吃点好的&#xff0c;多睡一会儿&#xff0c;再锻炼锻炼身体就好。 但我只是想炫耀一下这个彩虹屁插件。 原版插件&#xff1a;VS-code-Rainbowfart 我的版本&#xff1a;RainbowFart-Oberon 基于 MIT 开源&#xff0c;包括所有设计资源及音…

大数据信用风险竟然是这样形成的!查询方法也很简单

在大数据时代背景下&#xff0c;大数据信用风险成为了众多机构关注的焦点。这类风险涵盖了多头借贷、履约行为、联系人以及司法等多个方面。本文将深入解析大数据信用风险的形成原因及其查询方法&#xff0c;让我们一起来探索一下。 大数据信用风险主要表现在以下几个方面&…

硬盘删除的文件怎么恢复?这4个方法可以恢复误删文件

在数字时代&#xff0c;硬盘作为我们存储信息的主要工具&#xff0c;承载着大量的重要数据。然而&#xff0c;有时我们可能会因为误操作或病毒攻击等原因&#xff0c;不小心删除了硬盘中的文件。这时&#xff0c;如何有效地恢复这些文件就显得尤为重要。今天给大家分享三种恢复…

币圈是什么意思?币圈开发

币圈是一个涵盖了区块链、加密货币及其应用的独特领域&#xff0c;它的兴起与发展已经彻底改变了我们对金融、科技和未来的认知。 一、什么是币圈&#xff1f; 币圈可以被理解为围绕虚拟货币展开的一系列活动和产业的总称。它包括区块链技术的研发、数字货币的创造、交易、投资…

图形界面挂了?教你如何纯命令行下快速安装CentOS 7

在某些特定的系统或软件环境下&#xff0c;如使用 Parallels Desktop 18&#xff08;PD18&#xff09;虚拟化软件安装较老版本的操作系统&#xff08;如 CentOS 7&#xff09;&#xff0c;可能会遇到只能通过命令行进行安装的情况。这通常是由于内核版本与图形安装器的兼容性问…

JavaScript 进阶 (三)之构造函数/原型对象/对象原型/原型继承/原型链

JavaScript 进阶 &#xff08;三&#xff09;之构造函数/原型对象/对象原型/原型继承/原型链 编程思想面向过程面向对象 构造函数原型对象constructor 属性对象原型原型继承原型链 了解构造函数原型对象的语法特征&#xff0c;掌握 JavaScript 中面向对象编程的实现方式&#x…

【书生浦语第二期实战营学习笔记作业(四)】

课程文档&#xff1a;https://github.com/InternLM/Tutorial/blob/camp2/xtuner/readme.md 作业文档&#xff1a;https://github.com/InternLM/Tutorial/blob/camp2/xtuner/homework.md 书生浦语第二期实战营学习笔记&作业(四) 1.1、微调理论讲解及 XTuner 介绍 两种Fin…

C语言实现简单CRC校验

目录 一、实现题目 二、send模块 三、receive模块 四、运行截图 一、实现题目 二、send模块 #include <stdio.h> #include <string.h>// 执行模2除法&#xff0c;并计算出余数&#xff08;CRC校验码&#xff09; //dividend被除, divisor除数 void divide…

maya blendshape

目录 shape编辑器 maya创建blendshape python 脚本 添加形变动画 查看顶点个数 shape编辑器 打开方式&#xff1a; 窗口-动画编辑器-形变编辑器 maya创建blendshape python 脚本 import maya.cmds as cmds# 创建基础网格 - 球体 baseMesh cmds.polySphere(name"bas…

计算机技术的发展与未来趋势

引言 随着科技的飞速发展&#xff0c;计算机技术已成为现代社会不可或缺的一部分。从最初的简单计算工具到如今的超级计算机、云计算、人工智能等技术的广泛应用&#xff0c;计算机技术的变革深刻影响着我们的生活和工作方式。本文将探讨计算机技术的发展历程、当前的应用领域…

【Qt】.ui文件转.h文件

1、打开qt命令行 2、转换 uic -o ui.h mainwindow.ui

2024HW --->蓝队面试题

这段时间在写横向移动&#xff0c;搞得鸽了很久&#xff08;内网真的很玄学&#xff09; 还没写完。。。 但是这不是准备HW了吗。小编也来整理一下自己收集到的题目吧&#xff01;&#xff01;&#xff01; &#xff08;仅为个人见解&#xff0c;不代表最终答案&#xff09;&…

Android 12 Starting window的添加与移除

添加&#xff1a; 04-13 16:29:55.931 2944 7259 D jinyanmeistart: at com.android.server.wm.StartingSurfaceController.createSplashScreenStartingSurface(StartingSurfaceController.java:87) 04-13 16:29:55.931 2944 7259 D jinyanmeistart: at com.android.server.wm.…

STM32H7使用FileX库BUG,SD卡挂载失败

问题描述&#xff1a; 使用STM32H7ThreadXFileX&#xff0c;之前使用swissbit牌的存储卡可正常使用&#xff0c;最近项目用了金士顿的存储卡&#xff0c;发现无法挂载文件系统。 原因分析&#xff1a; 调试过程发现&#xff0c;关闭D-Cache可以挂载使用exfat文件系统。 File…

edu邮箱官方购买渠道手把手选购指南记录

教育优惠&#xff0c;是一项针对于在校大学生和教职员工推出的特殊优惠活动。一些公司会将旗下产品或服务以一定的折扣&#xff0c;甚至免费提供给高校师生。想想自己上大学的时候啥都不知道,毕业后才发现浪费了这么多优秀的资源.如果你还是一名在校大学生&#xff0c;那么就不…

小程序总结

第一章 微信小程序概述 1.1 认识微信小程序 简介&#xff1a;微信&#xff08;WeChat)是腾讯公司于2011年1月21日推出的一款为智能终端提供即时通信服务的应用程序&#xff0c;于2017年1月上线。 优势&#xff1a;1. 无需安装 2. 触手可及 3. 用完即走 4. 无需卸载…

日志框架整合SpringBoot保姆级教程+日志文件拆分(附源码)

目录 介绍 日志概述 日志文件 调试日志 系统日志 日志框架 日志框架的作用 日志框架的价值 流行的日志框架 SLF4J日志门面 介绍 环境搭建简单测试 集成log4j logback Logback简介 Logback中的组件 Logback配置文件 日志输出格式 控制台输出日志 输出日志到…

WebServer项目介绍文章【四叶专属】

Linux项目实战C轻量级Web服务器源码分析TinyWebServer 书接上文&#xff0c;学习开源项目的笔记没想到居然有不少阅读量&#xff0c;后面结合另一个前端开源项目简单做了点修改&#xff0c;没想到居然有需要的同学&#xff0c;那么我就专门为四叶开一篇文章吧&#xff0c;【源码…