检测 Vue-Router 导航卫士中的后退按钮

2023-12-30

路线如何改变对于我的情况很重要。 所以,我想捕捉浏览器或 gsm 的后退按钮何时更改路线。

这就是我所拥有的:

router.beforeEach((to, from, next) => {
  if ( /* IsItABackButton && */ from.meta.someLogica) {
    next(false) 
    return ''
  }
  next()
})

是否有一些我可以使用的内置解决方案IsItABackButton评论?我猜 Vue-router 本身没有,但任何解决方法也可以在这里工作。或者是否有其他更好的方式来识别它?


这是我发现的唯一方法:

我们可以监听 popstate,将其保存在变量中,然后检查该变量

// This listener will execute before router.beforeEach only if registered
// before vue-router is registered with Vue.use(VueRouter)

window.popStateDetected = false
window.addEventListener('popstate', () => {
  window.popStateDetected = true
})


router.beforeEach((to, from, next) => {
  const IsItABackButton = window.popStateDetected
  window.popStateDetected = false
  if (IsItABackButton && from.meta.someLogica) {
    next(false) 
    return ''
  }
  next()
})
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

检测 Vue-Router 导航卫士中的后退按钮 的相关文章

  • Android 设备上的 PhoneGap 蓝牙插件

    我一直在尝试让 PhoneGap 工作的蓝牙插件 但我似乎不知道哪里出了问题 首先 我的测试设备是 Galaxy S3 GT 19305T 应用程序是使用PhoneGap CLI http docs phonegap com en 3 0
  • TypeError: props.render 不是一个函数(React hook 形式)

    我将方法作为我用react hook form制作的形式的道具传递 当从react hook form添加控制器时 它给了我 TypeError props render不是一个函数 我在网上找不到任何解决方案 因此感谢任何帮助 impor
  • 在 Vue.js 中从父组件执行子方法

    目前 我有一个 Vue js 组件 其中包含其他组件的列表 我知道使用 vue 的常见方式是将数据传递给孩子 并从孩子向父母发出事件 但是 在这种情况下 我想在子组件中的按钮出现时执行子组件中的方法 parent被点击 哪种方法最好 一种建
  • 如何重定向到 instagram://user?username={username}

    我的 html 页面上有这个链接 可以在特定用户上打开 Instagram 应用程序 a href Link to Instagram Profile a 我一直在寻找自动运行 url instagram user username USE
  • 我想检查 $('#td1').text() === "x" 是否?

    我想检查innerHtml是否有X或O 所以我不能再次添加任何其他东西 但它不起作用 添加检查代码后它就停止了 我在这里尝试做一个简单的XO游戏来更熟悉javascript和jquery 我也不确定是否可以用 jQuery 做到这一点
  • Google App Engine:修改云运行环境

    我正在尝试部署一个使用自定义 Node js 服务器的 Next js 应用程序 我想将自定义构建变量注入应用程序 next config js const NODE ENV process env NODE ENV const envTy
  • 可以使用 jQuery 或 Javascript 将图片的特定部分用作链接吗?

    我有这个想法 将图片 而不是文本 的各个部分链接到不同的页面或网站 并且我想在不实际创建不同的照片并将它们彼此靠近的情况下完成 这样看起来就像是一张完整的图片 这里有人知道如何使用 JavaScript 的变体 例如 jQuery 或纯 J
  • Javascript正则表达式用于字母字符和空格? [关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我需要一个
  • Vue:通过 CSS 选择组件的最简洁方法是什么?

    我有一个bar成分 它的使用方式如下
  • JavaScript 重定向到新窗口

    我有以下代码 它根据下拉列表的值重定向到页面 我如何使其在新窗口中打开 function goto form var index form select selectedIndex if form select options index
  • 图像作为电子邮件附件

    我想构建一个应用程序 我可以在电子邮件中附加图像 打开图像并将其设置为我的壁纸 我想让它跨平台 所以你能告诉我是否可以使用phonegap 或者我是否必须为iphone和android构建一个本机应用程序 您好 如果您只想通过电子邮件附加图
  • 如何将 Google Charts 与 Vue.js 库一起使用?

    我正在尝试使用 Vue js 库使用 Google Charts 制作图表 但我不知道如何添加到 div 这是我尝试做的 这是如何使用普通 javascript 添加图表 这是文档的代码示例 https developers google
  • 在 webpack 2.x 中使用 autoprefixer 和 postcss

    如何使用autoprefixer使用 webpack 2 x 以前 它曾经是这样的 module loaders test scss loader style css sass postcss postcss gt return autop
  • 提交表单并重定向页面

    我在 SO 上看到了很多与此相关的其他问题 但没有一个对我有用 我正在尝试提交POST表单 然后将用户重定向到另一个页面 但我无法同时实现这两种情况 我可以获取重定向或帖子 但不能同时获取两者 这是我现在所拥有的
  • Javascript 数组到 VBScript

    我有一个使用 Javascript 构建的对象数组 我需要使用 VBScript 读取它 如下例所示 我找不到在 VbScript 代码中循环遍历数组的方法myArray object 这个例子是我的问题的简化 我无法更改页面的默认语言 这
  • 模块构建失败(来自 ./node_modules/babel-loader/lib/index.js)Vue Js

    我从 GitHub 下载了一个我和我的朋友正在开发的项目 但是当我尝试运行时 npm run serve 我收到这个错误 src main js 中的错误 Module build failed from node modules babe
  • 在 vue.js 中访问数组对象属性

    给定以下数组vue js packageMaps Object packageMap 0 Object Id 16 PackageType flag list ProductCode F BannerBase packageMap 1 Ob
  • Safari 支持 JavaScript window.onerror 吗?

    我有一个附加到 window onerror 的函数 window onerror function errorMsg url line window alert asdf 这在 firefox chrome 和 IE 中工作正常 但在 s
  • 为什么 jquery 没有检测到单选按钮未被选中的情况? [复制]

    这个问题在这里已经有答案了 可能的重复 JQuery radioButton change 在取消选择期间不会触发 https stackoverflow com questions 5176803 jquery radiobutton c
  • 将 MQTTNet 服务器与 MQTT.js 客户端结合使用

    我已经启动了一个 MQTT 服务器 就像this https github com chkr1011 MQTTnet tree master例子 该代码托管在 ASP Net Core 2 0 应用程序中 但我尝试过控制台应用程序 但没有成

随机推荐

  • @supports 的功能检测?

    如何检测浏览器是否支持 CSS supports 功能 由于 Internet Explorer 和 Safari 不支持它 因此我的 Web 应用程序不知道在这些浏览器中应用哪些样式 使用纯 CSS 您可以依靠级联来确定浏览器是否理解 s
  • 使用 Gunicorn 部署时如何在 Flask 方法之间共享内存资源

    我使用 Flask 实现了一个简单的微服务 其中处理请求的方法根据请求数据和加载到内存中的相当大的数据结构计算响应 现在 当我使用gunicorn和大量工作线程部署此应用程序时 我只想在所有工作人员的请求处理程序之间共享数据结构 由于数据只
  • LWJGL 教程 [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 如何在不同情况下删除Excel中的重复项(VBA)?

    我需要将相应的值汇总到右侧的列中 但也需要删除重复项 这是交易 例如 如果我有从 A 到 F 的列 如果 A 到 E 列与另一行相同 则宏将删除该行并保存旧行 如果 A 至 C 列与另一现有行相同 宏将删除另一行并将 D 和 E 列中的相应
  • 用于交叉编译 BBB 应用程序的工具链

    我的本机是基于ubuntu的14 04 LTS x86 64系统 我想为Beaglebone black交叉编译应用程序和QT程序 这是一个运行在Debian 2015发行版上的基于armv7的系统 我应该在本机系统上安装哪个工具链才能完成
  • NAudio fft 结果给出所有频率的强度 C#

    我有 NAudio 的 wasapi 环回记录和数据 FFT 的工作实现 我得到的大部分数据都是正常的 但每隔一段时间 10 秒到几分钟的时间间隔 它就会显示几乎所有频率上的幅度 基本上 图片从右到左滚动 时间和频率从底部的最低频率开始按对
  • .Net 静态方法及其对并发的影响?

    我目前正在构建一个将由网络服务使用的 API 我想知道如果我使用大量的 API 来构建我的 API 会遇到什么性能问题静态方法 最初的想法是构建充当服务的专家对象 在单用户环境中 这种方法非常棒 但我很快就需要将其移植到多 并发用户环境中
  • Beyond Compare 2 忽略大小写

    如何让 Beyond Compare 2 忽略字母大小写的差异 例如 Foo Bar 和 fOo BAR 将被视为相同 在我拥有的BeyondCompare版本 版本3 3 Pro 中 您可以选择 文本重要 字符大小写除外 要找到此设置 请
  • 如何为 WKWebView 发出的请求设置自定义 HTTP 标头

    我构建了一个包含 WKWebView 的应用程序 并且 Web 视图加载的网站支持多种语言 我怎样才能改变Accept LanguageWKWebView 中的标头 或其他 HTTP 标头 我已经让它以某种方式工作 但只有获取请求才会有自定
  • 如何使正在运行的可执行文件删除自己的文件

    例如 我正在运行可执行文件 TrashClean exe 我希望它删除所有我不想要的文件 并在最后一步删除自身 硬盘驱动器上的 Trash Clean exe 我想知道在 C 中是否可以 请参见如何让您的应用程序立即自行删除 http ww
  • 使用 Spring Boot、Session 和 Redis 创建会话时未复制会话

    我正在尝试使用 Spring Cloud 的 Zuul Eureka 和我自己的服务来实现微服务架构 我有多个具有 UI 和服务的服务 每个服务都可以使用 x509 安全性对用户进行身份验证 现在我试图将 Zuul 放在这些服务之前 由于
  • 如何将文件存储到数据库中?

    如何将用户上传的文件存储到数据库中 我想将文件存储在数据库中 我们该怎么做 在后端 我将 sql 与 c net 应用程序一起使用 此解决方案适用于 SQL SERVER 2005 2008 你必须创建表VARBINARY MAX 作为列之
  • 平静力量布局的初始刻度

    我刚刚开始涉足 d3 发现学习曲线相当陡峭 这个过程与我习惯的完全不同 而且数学大多超出了我的理解范围 无论如何 我的项目由代表系统之间集成地图的部队布局组成 这部分效果非常好 但我确实有一个主要问题 这也体现在 Michael Bosto
  • Ember.js - 正确执行(结构、包含、一般问题)

    我正在使用 ember js 并且不知何故陷入了寻找如何以正确的方式构建结构的困境 我可以跟随所有例子 http emberjs com guides 但将它们放在一起时遇到一些问题 我正在使用 require js 和车把 我的目录结构如
  • 总结不同格式日期的小时数。 C#

    我有个问题 我需要用代码总结在办公室的工作时间 我从 SQL Server 获取的日期没有问题 但我有不同的格式 例如 2019 09 23 14 54 23 2019 09 23 14 54 23 or 2019 09 23 14 54
  • Android volley 在所有请求完成时获取回调

    我正在使用 volley 对一系列请求进行排队 当这些请求发生时 我向用户显示一个进度对话框 有没有办法可以检查所有这些请求何时完成 这就是我要的 Show progress bar for int i 0 i
  • std::is_same 结果与左值和右值引用

    我正在将 std is same 实用程序函数与右值和左值引用结合使用 并遇到了奇怪的行为 考虑这个检查变量 t 类型的函数模板 我正在使用 VS 2013 struct Test template lt class T gt void h
  • 使用子进程从 python 执行时,ssh 未被识别为命令?

    这是我的代码 import subprocess import sys HOST xyz3511 uhc com Ports are handled in ssh config since we use OpenSSH COMMAND up
  • jQuery 将小数添加到 SELECT,没有重复项并可选择删除

    好的 这里是 需要过滤掉重复项并能够删除添加到选择框的值 Number
  • 检测 Vue-Router 导航卫士中的后退按钮

    路线如何改变对于我的情况很重要 所以 我想捕捉浏览器或 gsm 的后退按钮何时更改路线 这就是我所拥有的 router beforeEach to from next gt if IsItABackButton from meta some