解决 Vue 页面中地址栏参数变更不刷新的问题

news2024/9/21 22:40:48

在一次Vue项目开发中,遇到了只改变路由中的参数,路由地址不改变页面数据不刷新的问题。造成这个问题的原因,是因为 vue-router 同一个页面地址栏参数改变(比如文章的发布和编辑是同一个页面),不会触发vue的created或者mounted钩子,所以数据不会重新渲染。

解决方法:

方法一

监听地址栏变化(watch),这是vue-router官方给出的解决办法。

监听路由变化,把初始化的方法重新写到监听的方法里面执行

watch: {
    $route(to, from) {
        if (this.$route.query.参数) {
             重新加载一次created或mounted钩子中的渲染的数据
        }
      },
    // 或者
    $route(){
         if (this.$route.query.参数) {
             重新加载一次created或mounted钩子中的渲染的数据
         }
       }
    }

方法二

给router-view加个唯一的key,来保证路由切换时都会重新渲染触发钩子

个人更倾向于第二种简单省事,第一种要是有多个页面共用,就要多次写监听

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

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

相关文章

cms-wordpress 漏洞

登录后台 一、后台改模板 点击外观,编辑, 找一个php文件,在最开头加入一句话木马; 点击更新,访问模板类路径下的这个文件(不知道默认模板路径可以搜) 使用工具连接 二、上传主题拿shell 点击外观,主题&am…

NeRF学习——基于Pytorch代码复现的笔记

代码复现的框架是基于:pengsida 的 Learning NeRF 源代码框架是基于 Linux 的,我在 Windows 上进行复现有些许 bug,Windows 上 bug 修复的框架版本:Learning NeRF 希望各位可以通过学习 NeRF-Pytorch 的源码来自己复现一下试试看…

Lanproxy开箱即用的内网穿透工服务!!

Lanproxy快速上手配置服务器转发到内网!! 本教程云服务器推荐使用的开发环境如下:服务器端配置配置端口登录Web界面 内网客户端配置下载客户端配置客户端端口 最终效果测试 本文主要记录了使用Lanproxy搭建内网穿透服务的过程,其中包括服务端和客户端的详…

使用redis缓存文章浏览量

效果展示 好处 首先初始化所有浏览量 访问文章后增加的浏览量**不直接修改数据库,先存到redis然后访问也是获取redis的浏览量,做个定时任务,后续自定义时间同步数据库**,好像也就是一个集中处理罢了 CommandLineRunner实现项目…

鸿蒙系统学习指南

🐟作者简介:一名大三在校生,喜欢编程🪴 🐡🐙个人主页🥇:Aic山鱼 🐠WeChat:z7010cyy 🦈系列专栏:🏞️ 前端-JS基础专栏✨前…

8月2日SpringBoot学习笔记

今日内容: AOP 面向切面 代理模式 springmvc 运行原理 拦截器 springmvc异常处理机制 代理模式 为其他对象提供一种代理以控制对这个对象的访问。想在访问一个类时做一些控制是使用。 静态代理 优点:便于理解 缺点: 1.代码冗余&…

Linux 内核源码分析---I/O 体系结构与访问设备

I/O 体系结构 与外设的通信通常称之为输入输出,一般都缩写为I/O。 在实现外设的I/O时,内核必须处理3个可能出现的问题: (1)必须根据具体的设备类型和模型,使用各种方法对硬件寻址; &#xff08…

java面试题Spring部分(四)

一、什么事spring的三级缓存 典型回答 在Spring的BeanFactory体系中,BeanFactory是Spring IOC容器的基础接口,其DefaultSingletonBeanRegistry类实现了BeanFactory接口,并维护了三级缓存: public class DefaultSingletonBeanRe…

如何在OpenHarmony 4.1R上设置系统默认不锁屏(修改系统锁屏应用)

本文介绍如何修改系统锁屏应用,从而实现在OpenHarmony 4.1R上设置系统默认不锁屏。 环境配置 1.DevEco Studio 4.1 Release,下载链接地址 API10 Full SDK,安装教程 步骤 1.首先下载4.1r分支的系统锁屏应用applications_screenlock 2.修改系统锁屏应…

【Plotly-驯化】一文画出漂亮的流量漏斗图:plotly.funnel函数使用技巧

【Plotly-驯化】一文画出漂亮的流量漏斗图:plotly.funnel函数使用技巧 本次修炼方法请往下查看 🌈 欢迎莅临我的个人主页 👈这里是我工作、学习、实践 IT领域、真诚分享 踩坑集合,智慧小天地! 🎇 免费获…

HTML+CSS練習---空隙產生記錄

1.第一層和第二層之間的間隙&#xff1a;以為導航欄超過高度朝下擠下來了 2.第2層兩個div中的空隙 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Document</title><style>font-face {f…

ATTCK实战系列-红队评估 (一)Vulnstack三层网络域渗透

目录 一、搭建环境 1.靶场下载地址&#xff1a; 2、网络拓扑 3、环境配置 Win7&#xff08;外网服务器 &#xff09; Win2008&#xff08;域控&#xff09; Win2003&#xff08;域成员&#xff09; 4、启动环境 二、信息收集 1、端口扫描 2、目录扫描 三、漏洞利用…

IM即时通讯客服聊天系统源码(某站售8千)

即时通讯客服聊天系统已经成为企业提供卓越客户服务的不可或缺的工具。为了帮助您快速搭建强大的客服聊天系统&#xff0c;提供了一款全面的源码模板&#xff0c;基于Java和Spring Boot微服务架构构建&#xff0c;支持多种功能模块&#xff0c;以及消息加密、红包、消息撤回等功…

基于JSP的学生综合考评管理系统

你好&#xff0c;我是专注于教育信息化的开发者&#xff0c;很高兴为您介绍本系统。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;JSPJava 工具&#xff1a;Eclipse、MySQL数据库管理工具 系统展示 首页 管理员功能 教师功能 学生功能 摘要 本文…

笔记本怎么手动设置ip地址:一步步教你操作

在使用笔记本电脑连接网络时&#xff0c;有时候我们需要手动设置IP地址以满足特定的网络需求或解决网络问题。手动设置IP地址可以帮助我们更好地控制网络连接&#xff0c;确保设备在网络中的稳定性和安全性。然而&#xff0c;对于不熟悉网络设置的用户来说&#xff0c;手动设置…

EPLAN EDZ 文件太大导入很慢如何解决?

目前各个品牌都在提供 EPLAN EDZ部件库文件,但是一般都是一个总的EDZ文件,导入过程中,因为电脑配置和其他问题,导致导入过程中EPLAN会崩溃或者长时间不动。 我们分析下EDZ文件的构成,这是个压缩文件,换了个壳而已。用压缩软件把edz打开,这里不是解压,直接右键,用解压…

[CP_AUTOSAR]_系统服务_DEM模块(二)功能规范介绍

目录 1、DEM 功能规范描述1.1、Startup behavior1.2、Monitor re-initialization 在前面 《[CP_AUTOSAR]_系统服务_DEM模块&#xff08;一&#xff09;》文中&#xff0c;简要介绍了 DEM 模块的功能、与其它模块之间的功能交互&#xff0c;本文将接着介绍 DEM 模块的功能规范。…

Web前端:Vue开发环境搭建

一、搭建开发环境&#xff1a; 1.nodejs安装&#xff1a; 下载地址&#xff1a; https://nodejs.org/dist/v20.13.1/node-v20.13.1-x64.msi 查看版本号&#xff1a; node -v 2.安装nrm(用于指定国内镜像源&#xff0c;加速依赖包下载速度)&#xff1a; 安装nrm&#xff…

程序员的魔法石!

本文由 ChatMoney团队出品 AI自己写代码&#xff0c;这只是传说&#xff1f;还是摸鱼新指南&#xff1f; AI出现之前&#xff0c;从来都是老板或产品经理提需求&#xff0c;程序员熬夜加班吭哧吭哧写代码或者是从Github&#xff0c;Stackoverflow上controlc&#xff0c;control…

为面试准备的一些内容

开发中使用了什么技术&#xff1f; mvvm、compose、livedata、单例模式、工厂模式、弱引用、线程池、Handler。 对于项目一开始我们打算使用aosp原生的管控方式&#xff0c;如UsageStatManager获取每个app的使用时长&#xff0c;和使用PackageManager的setPackagesSuspended方…