vue3中,this.$router.push刷新当前页面,该页面不重新加载需要手动刷新的解决方案

2023-10-27

// 1-demo.vue
在this.$router.push('/demo')后,demo.vue没有刷新也没有重新加载,但是路由地址已经变了,只是需要手动刷新

// 2-解决  监听一下当前路由
watch: {
  $route (to, from) {
  	// to表示要跳转的路由,from表示从哪儿跳的路由   to.path
    this.$router.go(0)
  },
},
// 以上是我目前可以解决我的问题的方法

// 以下记录百度搜到的,为了防止以后上述方法失效
// 第一种
// 1-demo.vue  在当前需要刷新的页面demo.vue中,引入router,就是我们写的路由文件
import router from '@/router/index'
console.log(router)    // 可以打印一下这个router看看

// 2-用这个路由对象去push,不要再用this了
router.push({ name: 'demo', params: { id, dataId } })

// 3-如果要获取路由传的参,就要用currentRoute,它就相当于原来的this.$route
原来获取参数: this.$route.params
现在获取参数: router.currentRouter.value.params.id

// 4-但是!使用router-link进行的路由跳转,保持不变跟原来一样
<router-link :to="{ name:'demo', params: { id, dataId } }"></router-link>

// 此种方法转载:https://blog.csdn.net/qq_42539194/article/details/113255097?spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-3.pc_relevant_paycolumn_v3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-3.pc_relevant_paycolumn_v3&utm_relevant_index=5

// 第二种   该方法与我的类似,都是监听路由,只是我的监听路由,是当路由地址发生变化时,执行this.$router.go(0)再跳转一下当前页面以此代替手动刷新
而转载的这种,是监听路由,当路由地址发生变化时,执行this.xxxx()方法,重新走接口渲染列表
methods: {
  getDataList() { }
},
created() {
  this.getDataList();
},
watch: {
  // 如果路由发生变化,再次执行该方法
  '$route': 'getDataList'
}

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue3中,this.$router.push刷新当前页面,该页面不重新加载需要手动刷新的解决方案 的相关文章

  • Phonegap使用命令行工具添加插件

    我是phonegap的新手 我按照phonegap官方网站中定义的步骤使用命令行工具创建项目 nodejs 我成功创建项目并添加平台 但是 当我尝试添加插件时出现以下错误 命令 cordova plugin add https git wi
  • 如何强制 pm2 在特定时间后重新启动?

    我在用PM2让我的 Node js 应用程序保持运行 有什么办法可以拥有PM2每 1 小时重新启动一次我的应用程序 将下面的代码放入pm2 js并开始它pm2 start pm2 js var pm2 require pm2 pm2 con
  • 打字稿:“找不到模块”且输入有效

    我刚刚使用 typescript 启动了一个新的 Nodejs 项目 我安装了打字 https github com typings typings https github com typings typings 并使用它来安装 Node
  • 运行“npm install”:Node-gyp 错误 - MSBUILD.exe 失败,退出代码:1

    我在跑npm install在 Windows 上安装我的项目中的所有软件包 然后我收到有关 MSBUILD exe 的错误 gyp ERR stack Error C Program Files x86 Microsoft Visual
  • Node + Express 会话过期?

    我有一个 Express 应用程序 并且有一个登录表单 我需要持续 1 个月的会话 我是否将 maxAge 设置为一个月 以毫秒为单位 我让两台计算机保持打开状态并登录了 24 小时 当我回来时 两台计算机都已注销 我该如何解决这个问题 实
  • Yii2:对 ajax 提交的表单进行 ajax 表单验证

    我想知道是否有 Yii2 专家可以帮助我了解如何最好地结合使用 ajax 表单和 Yii ajax 验证 我想我可以解释这个问题 而无需向您介绍我的所有代码 我正在制作一个促销代码输入表单 用户在表单中输入促销代码 该表单通过 ajax 提
  • 是否可以禁用特定 jQuery Ajax 调用的 Turbolinks 以防止页面刷新和滚动?

    我有一个 Rails 5 应用程序 非常想使用 Turbolinks 在应用程序中 有几个 PATCH ajax 调用 它们只是用新数据更新服务器 但不需要担心更新页面的状态 每当这些 ajax 请求返回时 Turbolinks 就会刷新页
  • Jquery ajax请求,等待最新请求完成

    我有一个文本框 每次用户输入一个字母时 我都会使用 ajax 请求进行搜索 并为用户 实时 显示结果 通常 当用户键入字母时 发出请求所需的时间比用户输入新字母所需的时间更长 因此在第一个请求结束之前发出新请求 如果第一个请求能够在我执行下
  • 如何将中间件绑定到socket.io中的事件

    现在您可以将中间件绑定到io use middleware 但这仅在建立套接字连接时触发 有没有办法在将其传递给事件句柄之前拦截它 就像在expressjs中一样 换句话说 In 快递 js你可以做 app get middleware1
  • 由于预发布,Node 应用程序无法运行

    即使安装成功 我也会安装无效的软件包 顺便说一句 这个问题与答案相关 关于版本控制的问题 https stackoverflow com questions 27628153 npm versioning how does this edg
  • 如何调试 Gulp 任务?

    如何调试我的中定义的 gulp 任务gulpfile js使用诸如 Google Chrome 调试器之类的调试器逐行单步执行任务的代码 对于 Node js 6 3 版本 您可以使用 inspect flag https nodejs o
  • 无法让基本的 pjax 示例工作

    编辑 非 工作示例在这里 http www jogos mmorpg com pjax html http www jogos mmorpg com pjax html 我正在尝试重现一个非常基本的 PJAX 示例 如自述文件中所述 htt
  • Node Sequelize - “按原样”插入日期而不转换为 UTC

    我正在尝试运行一个简单的查询 例如 Insert into table somedate values 2018 06 11 23 59 00 但 Sequelize 将其执行为 Insert into table somedate val
  • 让 babel 排除测试文件

    在我的构建步骤中 我使用 babel 将代码转译为 es5 从src to dist 如何让它排除以以下结尾的文件 test js 包 json scripts build babel src out dir dist babelrc pr
  • “gulp”不被识别为内部或外部命令

    我正在尝试使用Gulp http gulpjs com and Node Js https nodejs org en 流式传输我的生产过程中缩小和连接 CSS JS 文件的过程 这是我所做的 我安装了Node Js https nodej
  • 使用 enctype="multipart/form-data" 时出现 CSRF 错误

    每当我将 enctype multipart form data 添加到我的 html 表单中时 我得到ForbiddenError invalid csrf token 如果我删除 enctype 它就可以工作 我发送的 csrf 代码如
  • 检查用户是否从后端 Firebase 身份验证登录

    在我的前端 用户使用 Firebase 身份验证浏览器登录 那部分工作得很好 除了 Firebase 后端之外 我还有提供其他内容的 NodeJS 后端 但是 我需要仅向经过身份验证的用户提供内容 我的问题是 有没有办法让我的 NodeJS
  • Spring Security 的 AJAX 请求给出 403 Forbidden

    我有一个基于spring boot spring security thymeleaf的网站 在某些情况下我也使用ajax 问题 我在 Spring Security 中使用表单登录安全性 在浏览器中 登录后我可以使用rest API GE
  • 通过 Amazon SQS 将压缩文本从 PHP 发送到 NodeJS

    我似乎一直坚持通过 Amazon SQS 将压缩消息从 PHP 发送到 NodeJS 在 PHP 方面我有 SQS gt sendMessage Array QueueUrl gt queueUrl MessageBody gt artic
  • 未捕获的类型错误:未定义不是函数

    我收到消息Uncaught TypeError Undefined is not a function当我尝试调用家庭控制器中的方法时 也许关于我为什么收到此消息的建议 findIdpActivities function pernr ca

随机推荐

  • Linux——gcc/g++以及make/Makefile的使用

    简介 在Linux的系统中 想要完成代码编译 gcc g 是不可缺少的工具 而make Makefile能否熟练应用则从一个侧面体现出一个人是否有能力独自完成一个大型工程 而本篇文章就带领大家了解一些gcc g 和make Makefile
  • 层叠上下文(stacking context)

    一 什么是层叠式上下文 层叠上下文 是HTML中的一个三维概念 如果元素具备以下任何一个条件 则该元素会创建一个新的层叠上下文 根元素 z index不为auto的定位元素 二 什么是层叠级别 同一个层叠上下文的背景色以及内部元素 谁在上谁
  • IPsec SA 创建步骤——IKE协议

    IPsec SA 创建步骤概述 IPsec SA creation steps There are two steps on the IPsec SA creation phase 1 is to creat IKE SA and phas
  • 为什么重写equals方法时必须重写hashcode方法

    文章目录 1 与 equals的区别 2 重写equals 3 为什么重写equals方法时必须重写hashcode方法 3 1 Hash算法 3 2 HashCode 相关文章 为什么重写equals方法时必须重写hashcode方法 J
  • 在vue页面中,直接展示代码及样式高亮(vue 中使用 highlight)

    参考链接 https blog csdn net u011364720 article details 90417302 前言 效果如下 想要在前端页面中 直接展示代码的样式 就像一些开发文档的源码展示一样 使用插件 highlight j
  • C++智能指针 shared_ptr,unique_ptr和weak_ptr

    1 智能指针为什么存在 因为C 没有自动回收内存的机制 因此每一次new出来的动态内存必须手动delete回去 因此智能指针可以解决这个问题 2 智能指针的大致描述是什么 智能指针 自动负责释放所指向的对象 实际上它利用了栈的机制 每一个智
  • Go语言基础知识4——依赖管理

    依赖 别人写的库 依赖其进行编译 依赖管理的三个阶段 GOPATH GOVENDOR go mod GOPATH和GOVENDOR正在向go mod迁移 一 GOPATH GOPATH是一个环境 就是一个目录 默认在 go unix lin
  • spring-boot集成spring-brick实现动态插件

    spring boot集成spring brick实现动态插件 spring boot集成spring brick实现动态插件 项目结构 需求实现 spring boot集成spring brick 环境说明 1 主程序集成spring b
  • GnosisSafeProxyFactory合约学习

    GnosisSafe是以太坊区块链上最流行的多签钱包 它的最初版本叫 MultiSigWallet 现在新的钱包叫Gnosis Safe 意味着它不仅仅是钱包了 它自己的介绍为 以太坊上的最可信的数字资产管理平台 The most trus
  • UTXO的定义(交易,输入输出)-1

    在比特币系统中并没有账户的概念 有的是遍布全网区块链的UTXO 所谓UTXO是指关联比特币地址的比特币金额的集合 是一个包含数据和可执行代码的数据结构 一个UTXO的基本单位是 聪 聪 是比特币的最小计量单位 一个比特币等于10 8聪 一个
  • Go标准库日志打印,以及同时输出到控制台和文件

    打印 在使用go写一些小程序时 我们没必要引入额外的包 直接使用fmt标准包打印即可 import fmt func main fmt Println line1 fmt Print line2 fmt Printf line d n 3
  • PTA 剥洋葱(C语言 + 详细注释 + 代码超简单)

    输入格式 一行 一个整数 即图形的层数 输出格式 如上述图形 输入样例 3 输出样例 AAAAA ABBBA ABCBA ABBBA AAAAA 打印图形题关键是找规律 一般只需两重循环 行循环 列循环 include
  • keras_contrib 安装(各种尝试详细过程)

    问题描述 from keras contrib layers import CRF 指示报错没有安装此模块 但直接查找模块找不到 百度的解决方法 第一次尝试 pip install git https www github com kera
  • Git学习笔记(Ubuntu)Git分支

    分支简介 分支创建 git branch xx 查看 git log oneline decorate 分支切换 git checkout xx 查看分叉历史 git log oneline decorate graph all 分支新建与
  • npm -v 报错的解决方案

    如果你尝试了 百度里 所有查到的方法 都没有用 可以试着 在安装完成后 进入 C Users Administrator config configstore 文件夹 清理 update notifier npm json 文件后 再试 也
  • check_hostname requires server_hostname

    代理服务器 Proxy Server 的功能是代理网络用户去取得网络信息 形象地说 它是网络信息的中转站 是个人网络和Internet服务商之间的中间代理机构 负责转发合法的网络信息 对转发进行控制和登记 vpn
  • myslq服务安装启动

    D Program Files x86 MySQL MySQL Server 5 5 bin gt mysqld exe install Service successfully installed D Program Files x86
  • 【MATLAB】三维图像绘制+图形对象句柄

    目录 一 三维曲面绘图 二 图形对象句柄 1 三位图形属性设置 2 动态图 用循环语句 pause 叠加画图 hold on hold on 的基础上刷新画图 set h xdata x ydata y 每次重置点 曲线或曲面 的横纵坐标
  • Could not read Username Error for Git

    在用使用Vundle安装neocomplete时失败 查看log提示could not read Username for https github com Device not configured 经检查这里提示的Username是指n
  • vue3中,this.$router.push刷新当前页面,该页面不重新加载需要手动刷新的解决方案

    1 demo vue 在this router push demo 后 demo vue没有刷新也没有重新加载 但是路由地址已经变了 只是需要手动刷新 2 解决 监听一下当前路由 watch route to from to表示要跳转的路由