当前位置: 首页 > news >正文

Nuxt3 动态路由URL不更改的前提下参数更新,NuxtLink不刷新不跳转,生命周期无响应解决方案

Nuxt3 动态路由URL不更改的前提下参数更新,NuxtLink不刷新不跳转,生命周期无响应解决方案

首先说明一点,Nuxt3 的动态路由响应机制是根据 URL 是否更改,参数的更改并不会触发 Router 去更新页面,这在 Vue3 上同样存在。

以下描述三种路由类型:

  1. 可直达URL变化静态路由:/pages/news/index.html,
  2. 可直达URL动态变化动态路由:/pages/news/1.html
  3. 可直达URL、多参数动态变化动态路由:/pages/news/1.html?type=privacy

暂且称 2 为 单参动态路由,3 为 多参动态路由

单参动态路由多参动态路由 都是动态路由,但URL、参数动态变化 的动态路由,当你只更新参数而URL无改变的情况下,使用 NuxtLink 来实现页面刷新渲染,页面并不会刷新执行服务端渲染,而是一点反应都没有。
原因是:

  1. 动态路由监听的是URL的变化而不是参数变化,URL后自?开始皆为参数部分,vueRouter 会自动分化至 route.params 内作为参数缓存。因而参数的更新而URL未更新的情况,NuxtLink跳转是无响应的,即便URL后参数已经更新。

客户端 与 服务端 操作方法及思路

思路1:使用 watch 监听route.param 或 route.query 的变化,在回调中执行你要的操作

服务端:使用 Router() 函数的 go() 或者 window.location.reload() 均可起到刷新页面的效果

watch(() => route.query,(newVal, oldVal) => {// 二选一// window.location.reload();// router.go(route.fullPath);}
);

客户端:按你实际需求来,想写啥写啥,页面不会刷新,但是内容会更新

watch(() => route.query,(newVal, oldVal) => {// 这里写你的操作}
);

思路2:利用Nuxt3 动态路由机制,修改目录结构为多层动态目录结构

如:/news/[id]/[type.vue]

本人更推荐使用思路一,而不用思路二
原因有三:

  1. 目录结构简单清晰易懂,层层嵌套反而迷惑性大大提高
  2. 此种改法,对改造性项目不友好,改造力度过大
  3. 当你跑路时,接手的同事会痛苦

相关文章:

Nuxt3 动态路由URL不更改的前提下参数更新,NuxtLink不刷新不跳转,生命周期无响应解决方案

Nuxt3 动态路由URL不更改的前提下参数更新,NuxtLink不刷新不跳转,生命周期无响应解决方案 首先说明一点,Nuxt3 的动态路由响应机制是根据 URL 是否更改,参数的更改并不会触发 Router 去更新页面,这在 Vue3 上同样存在…...

Spring Boot集成Redis:配置、序列化与持久化

Spring Boot集成Redis:配置、序列化与持久化 一、简介 什么是Redis Redis是一个开源的、基于内存的高性能键值对存储数据库,支持多种数据结构如字符串、哈希、列表、集合等。它以其卓越的性能、高可用性和持久性而广受欢迎。 为什么要使用Redis Red…...

JAVA:探索 PDF 文字提取的技术指南

1、简述 随着信息化的发展,PDF 文档成为了信息传播的重要媒介。在许多应用场景下,如数据迁移、内容分析和信息检索,我们需要从 PDF 文件中提取文字内容。JAVA提供了多种库来处理 PDF 文件,其中 PDFBox 和 iText 是最常用的两个。…...

当你项目服务器磁盘报警

当你们公司运维收到这样的邮件,大概率日志文件过大引起的 在Linux下如何不停止服务,清空nohup.out文件呢? nohup.out会一直一直自己增长下去,如果你的服务器硬盘不给力的话,很容易把应用也挂掉(硬盘没空间 &#xff0…...

SpringBoot中Maven的定义及国内源配置教程,实现自动获取Jar包

推荐一个国内镜像API网站,无需信用卡及科学上网即可调用gpt,claude3,gemini等国外模型,感兴趣的可以看下👉:https://api.atalk-ai.com/ SpringBoot中Maven的定义及国内源配置教程,实现自动获取J…...

LSTM 和 LSTMCell

1. LSTM 和 LSTMCell 的简介 LSTM (Long Short-Term Memory): 一种特殊的 RNN(循环神经网络),用于解决普通 RNN 中 梯度消失 或 梯度爆炸 的问题。能够捕获 长期依赖关系,适合处理序列数据(如自然语言、时间序列等&…...

【卡尔曼滤波】数据预测Prediction观测器的理论推导及应用 C语言、Python实现(Kalman Filter)

【卡尔曼滤波】数据预测Prediction观测器的理论推导及应用 C语言、Python实现(Kalman Filter) 更新以gitee为准: 文章目录 数据预测概念和适用方式线性系统的适用性 数据预测算法和卡尔曼滤波公式推导状态空间方程和观测器先验估计后验估计…...

神经网络问题之一:梯度消失(Vanishing Gradient)

梯度消失(Vanishing Gradient)问题是深度神经网络训练中的一个关键问题,它主要发生在反向传播过程中,导致靠近输入层的权重更新变得非常缓慢甚至几乎停滞,严重影响网络的训练效果和性能。 图1 在深度神经网络中容易出现…...

【微软:多模态基础模型】(4)统一视觉模型

欢迎关注[【youcans的AGI学习笔记】](https://blog.csdn.net/youcans/category_12244543.html)原创作品 【微软:多模态基础模型】(1)从专家到通用助手 【微软:多模态基础模型】(2)视觉理解 【微…...

npm | Yarn | pnpm Node.js包管理器比较与安装

一、包管理器比较 参考原文链接: 2024 Node.js Package Manager 指南:npm、Yarn、pnpm 比较 — 2024 Node.js Package Manager Guide: npm, Yarn, pnpm Compared (nodesource.com) 以下是对 Node.js 的三个包管理工具 npm、Yarn 和 pnpm 的优缺点总结&am…...

建造者模式

什么是建造者模式? 建造者模式(Builder Pattern)是一种设计模式,用来一步步创建复杂的对象,而不用直接去调用复杂的构造函数或手动设置大量属性。 你可以: • 按步骤“搭建”对象。 • 自由选择要设置的部…...

Spring Boot核心概念:应用配置

Spring Boot提供了强大的配置系统,允许开发者通过配置文件轻松管理应用的配置。支持的主要配置文件格式有两种:application.properties和application.yml。 application.properties与application.yml application.properties和application.yml是Spring…...

linux环境安装cuda toolkit

1 全新安装 如果环境中没安装过cuda版本, 这种情况下比较简单。 直接在https://developer.nvidia.com/cuda-toolkit-archive选择对应版本下载安装即可。 如下为安装cuda toolkit 11.8. 2 环境中已经存在其他版本 这种情况下比较复杂一些。 首先要确认最高支持的版…...

WebSocket实战,后台修改订单状态,前台实现数据变更,提供前端和后端多种语言

案例场景: 在实际的后台中需要变更某个订单的状态,在官网中不刷新页面,可以自动更新状态 在前端页面实现订单状态的实时更新(不刷新页面),可以通过 WebSocket 的方式与后台保持通信,监听订单状态…...

实时通信协议概述:WebRTC、RTP/RTCP、RTMP、HLS 和 FLV 的比较与应用

文章目录 一、协议总览二、WebRTC2.1 时序图2.2 代码示例 三、RTP/RTCP3.1 时序图3.2 代码示例 四、RTMP4.1 时序图4.2 代码示例 五、HLS5.1 时序图5.2 代码示例 六、总结 一、协议总览 协议/格式细节对比适用场景用法WebRTC使用 UDP 传输协议,支持 P2P 通信&#…...

Vue路由

目录 1. 安装 vue-router 2. 创建 Vue 项目结构 3. 配置路由 4. 在 main.js 中使用路由 5. 在 App.vue 中添加 6. 创建组件 7. 运行你的应用 在 Vue.js 2 中,路由管理通常通过 vue-router 插件来实现。vue-router 是一个官方的路由管理器,允许你…...

uniapp开发微信小程序笔记3-全局配置、导航栏配置、tabBar配置

前言: 本文记录的是微信小程序的全局配置、导航栏配置、tabBar配置 一、全局配置: 可以直接查官方文档:pages.json 页面路由 | uni-app官网,有非常详细的文档说明 都是在 pages.json里面做配置的,我们可以看到已经有…...

Hash table类算法【leetcode】

哈希表中关键码就是数组的索引下标,然后通过下标直接访问数组中的元素 那么哈希表能解决什么问题呢,一般哈希表都是用来快速判断一个元素是否出现集合里。 例如要查询一个名字是否在这所学校里。 要枚举的话时间复杂度是O(n),但如果使用哈希…...

多算法模型(BI-LSTM GRU Mamba ekan xgboost)实现功率预测

概述 本项目旨在通过结合多算法模型网络实现功率预测。包括数据处理、特征工程、模型训练、模型推理和结果输出,最终结果以 JSON 格式返回。 代码地址:代码...

html 图片转svg 并使用svg路径来裁剪html元素

1.png转svg 工具地址: Vectorizer – 免费图像矢量化 打开svg图片,复制其中的path中的d标签的路径 查看生成的svg路径是否正确 在线SVG路径预览工具 - UU在线工具 2.在html中使用svg路径 <svg xmlns"http://www.w3.org/2000/svg" width"318px" height…...

贴代码框架PasteForm特性介绍之select,selects,lselect和reload

简介 PasteForm是贴代码推出的 “新一代CRUD” &#xff0c;基于ABPvNext&#xff0c;目的是通过对Dto的特性的标注&#xff0c;从而实现管理端的统一UI&#xff0c;借助于配套的PasteBuilder代码生成器&#xff0c;你可以快速的为自己的项目构建后台管理端&#xff01;目前管…...

【Redis】实现异步秒杀功能

一、将判断条件提前缓存到redis中 将判断条件缓存到redis中&#xff0c;如果判断成功直接操作redis中的数据&#xff0c;然后将数据写入redis&#xff0c;如果成功返回一个值。然后根据这个值判断是否成功&#xff0c;如果成功把用户id&#xff0c;优惠卷id&#xff0c;订单id存…...

React的API✅

createContext createContext要和useContext配合使用&#xff0c;可以理解为 “React自带的redux或mobx” &#xff0c;事实上redux就是用context来实现的。但是一番操作下来我还是感觉&#xff0c;简单的context对视图的更新的细粒度把控比不上mobx&#xff0c;除非配合memo等…...

2024亚太杯数学建模C题【Development Analyses and Strategies for Pet Industry 】思路详解

C&#xff1a;宠物行业及相关产业的发展分析与战略 随着人们消费观念的发展&#xff0c;宠物行业作为一个新兴产业&#xff0c;正在全球范围内逐渐积聚势头&#xff0c;这得益于快速的经济发展和人均收入的提高。1992年&#xff0c;中国小动物保护协会成立&#xff0c;随后1993…...

使用Notepad++工具去除重复行

使用Notepad工具去除重复行 参考链接&#xff1a;https://blog.csdn.net/londa/article/details/108981396 一 、使用正则表达式 1、对文本进行排序&#xff0c;让重复行排在一起 2、使用正则表达式替换&#xff08;注意&#xff09;^(.*?)$\s?^(?.*^\1$) 在替换时选择正…...

Three.js + AI:AI 算法生成 3D 萤火虫飞舞效果~

AI 驱动 3D 动画 大家好&#xff0c;我是石小石&#xff01;随着 Web 技术的发展&#xff0c;Three.js 成为构建 3D 图形和动画的主流工具。与此同时&#xff0c;人工智能&#xff08;AI&#xff09;在图像处理、动作生成等领域表现出强大能力。将 AI 与 Three.js 结合&#x…...

VScode clangd插件安装

前提 在VScode中写C代码时&#xff0c;总会用到 C/C 这个插件&#xff0c;也就自然而然地使用了这个插件带来的代码跳转和代码提示功能。但是当代码变地很多时&#xff0c;就会变得非常慢。所以经过调查后弃用C/C 插件的这个功能&#xff0c;使用 clangd 这个插件来提示C代码和…...

Swift从0开始学习 对象和类 day3

类&#xff08;Class&#xff09; 是一种类型或模板&#xff0c;描述了对象的特征和行为。对象&#xff08;Object&#xff09; 是类的实例&#xff0c;实际的实体&#xff0c;拥有自己的数据。 新入门的教学都喜欢用“人”来举例为类&#xff0c;在这里我也用“人”吧 //&…...

Linux——从命令行配置网络

1.使用nmcli添加静态网络连接 nmcli con add con-name static-addr \ ifname eth0 type ethernet ipv4.method manual ipv4.dns 172.25.250.220 \ ipv4.addresses 172.25.250.10/24 ipv4.gateway 172.25.250.254 命令概述 这是一条使用 nmcli&#xff08;NetworkManager 命令…...

RabbitMQ实现异步下单与退单

前言&#xff1a; 在电商项目中的支付模块也是一个很重要的模块&#xff0c;其中下订操作以及退订操作就是主要的操作。其次的下单是同步下单&#xff0c;也就是第三方支付、数据库扣减、积分增加、等等其他业务操作&#xff0c;等待全部执行完毕后向用户返回成功响应请求。对…...

[Python] 编程入门:理解变量类型

文章目录 [toc] 整数常见操作 浮点数字符串字符串中混用引号问题字符串长度计算字符串拼接 布尔类型动态类型特性类型转换结语 收录专栏&#xff1a;[Python] 在编程中&#xff0c;变量是用于存储数据的容器&#xff0c;而不同的变量类型则用来存储不同种类的数据。Python 与 C…...

C++ —— 剑斩旧我 破茧成蝶—C++11

江河入海&#xff0c;知识涌动&#xff0c;这是我参与江海计划的第2篇。 目录 1. C11的发展历史 2. 列表初始化 2.1 C98传统的{} 2.2 C11中的{} 2.3 C11中的std::initializer_list 3. 右值引用和移动语义 3.1 左值和右值 3.2 左值引用和右值引用 3.3 引用延长生命周期…...

Perl 简介

Perl 简介 Perl 是一种高级、通用、解释型、动态编程语言。由 Larry Wall 于 1987 年首次发布&#xff0c;它结合了 C、sed、awk 和 shell 脚本语言的特性。Perl 最初被设计用于文本处理&#xff0c;如报告生成和文件转换&#xff0c;但随着时间的推移&#xff0c;它已经发展成…...

Transformer中的Self-Attention机制如何自然地适应于目标检测任务

Transformer中的Self-Attention机制如何自然地适应于目标检测任务&#xff1a; 特征图的降维与重塑 首先&#xff0c;Backbone&#xff08;如ResNet、VGG等&#xff09;会输出一个特征图&#xff0c;这个特征图通常具有较高的通道数、高度和宽度&#xff08;例如CHW&#xff…...

【Linux篇】初学Linux,如何快速搭建Linux开发环境

文章目录 前言1. Linux背景介绍1.1 UNIX的发展历史1.2 Linux的发展历史 2. 企业应用现状3. 开源3.1 探索Linux源代码3.2 开源 VS 闭源 4. Linux的版本4.1 技术线4.2 商业产品线 5. os概念&#xff0c;定位6. 搭建Linux环境6.1 Linux环境的搭建方式6.2 购买云服务器 7. 使用XShe…...

竞赛思享会 | 2024年第十届数维杯国际数学建模挑战赛D题【代码+演示】

Hello&#xff0c;这里是Easy数模&#xff01;以下idea仅供参考&#xff0c;无偿分享&#xff01; 题目背景 本题旨在通过对中国特定城市的房产、人口、经济、服务设施等数据进行分析&#xff0c;评估其在应对人口老龄化、负增长趋势和极端气候事件中的韧性与可持续发展能力。…...

vim 使用技巧

使用技巧 正常模式&#xff08;Normal Mode&#xff09;插入模式&#xff08;Insert Mode&#xff09;命令模式&#xff08;Command Mode&#xff09; vim常用三种模式包括正常模式&#xff0c;插入模式&#xff0c;命令模式。 正常模式&#xff08;Normal Mode&#xff09; 进…...

CSS-flex布局

flex常用语法 display: flex 父级元素相关 flex-direction 主轴方向【水平方向&#xff08;默认&#xff09;、垂直方向】justify-content 主轴上的对齐方式【flex-end结束对齐、space-between两端对齐、center】align-items 交叉轴的对齐方式【center、flex-end】flex-wrap…...

小R的随机播放顺序

问题描述 小R有一个特殊的随机播放规则。他首先播放歌单中的第一首歌&#xff0c;播放后将其从歌单中移除。如果歌单中还有歌曲&#xff0c;则会将当前第一首歌移到最后一首。这个过程会一直重复&#xff0c;直到歌单中没有任何歌曲。 例如&#xff0c;给定歌单 [5, 3, 2, 1,…...

docker常见命令

1.启动容器 docker run 运行容器 docker run -d 守护线程运行容器 docker run -p 80:80 指定端口运行容器&#xff0c;左侧为服务器端口&#xff0c;右侧为容器端口 docker run --rm 停止容器后销毁 docker --name 指定容器名称 2.停止容器 docker stop (id/name) …...

C语言-指针作为函数返回值及二级指针

1、指针作为函数返回值 c语言允许函数的返回值是一个指针&#xff08;地址&#xff09;我们将这样的函数称为指针函数&#xff0c;下面的例子定义一了一个函数strlong&#xff08;&#xff09;&#xff0c;用来返回两个字符串中较长的一个&#xff1a; 1. #include <stdio…...

kotlin

参考资料&#xff1a; 参考资料 1、kotlin编译原理是先编译为class文件&#xff0c;再在java 虚拟机上执行2、变量 var 1 变量 val 2 常量 kotlin存在类型推导机制 var c:Int 1kotlin不存在基本类型&#xff0c;将全部使用对象类型3、函数 fun test(){}fun add(a:Int,b Int…...

【STM32】USART串口数据包

数据包的作用是将一个个单独的数据打包起来&#xff0c;方便进行多字节的数据通信 数据包格式 HEX数据包 文本数据包 数据包接收 HEX数据包接收&#xff08;固定包长&#xff09; 文本数据包接收&#xff08;可变包长&#xff09; 串口收发HEX数据包 接线图 Serial模块 se…...

开源TTS语音克隆神器GPT-SoVITS_V2版本地整合包部署与远程使用生成音频

文章目录 前言1.GPT-SoVITS V2下载2.本地运行GPT-SoVITS V23.简单使用演示4.安装内网穿透工具4.1 创建远程连接公网地址 5. 固定远程访问公网地址 前言 本文主要介绍如何在Windows系统电脑使用整合包一键部署开源TTS语音克隆神器GPT-SoVITS&#xff0c;并结合cpolar内网穿透工…...

echarts 图表resize() 报错Cannot read properties of undefined (reading ‘type‘)

原因是我使用了this.trainChart来接收数据&#xff0c;应该使用let或者var定义trainChart&#xff0c;就不会出现错误了。 错误代码如下&#xff1a; 原本 定义的echarts export default {data() {return {: null}} }现在 var trainChart null export default { }...

寻的制导律:从理论到应用的全景展示(下)

寻的制导律&#xff1a;从理论到应用的全景展示&#xff08;下&#xff09; 第六章 制导系统设计与实现 在制导系统的设计与实现过程中&#xff0c;系统需求分析、硬件与软件架构设计以及实现与测试方法是关键的三个环节。通过系统化的方法论&#xff0c;可以确保制导系统在复…...

ChatGPT 与其他 AI 技术在短视频营销中的技术应用与协同策略

摘要&#xff1a; 本文深入探讨了 ChatGPT 及其他 AI 技术在短视频营销中的应用。从技术层面剖析了这些技术如何助力短视频内容创作、个性化推荐、用户互动以及营销效果评估等多方面&#xff0c;通过具体方法分析、数据引用与大模型工具介绍&#xff0c;旨在为短视频营销领域提…...

使用PSpice进行第一个电路的仿真

1、单击【开始】菜单&#xff0c;选择【OrCAD Capture CIS Lite】。 2、单击【File】>【New】>【Project】。 3、①填入Name下面的文本框&#xff08;提示&#xff1a;项目名称不要出现汉字&#xff09;&#xff1b; ②选择【Analog or Mixed A/D】&#xff1b; ③单击【…...

SparkSQL 对 SQL 查询的优化静态优化和动态优化两大部分介绍

SparkSQL 对 SQL 查询的优化主要分为 静态优化 和 动态优化 两大部分&#xff0c;其中静态优化主要在查询编译时进行&#xff0c;而动态优化则是在查询执行过程中进行。SparkSQL 的优化包括了多种技术&#xff0c;例如 RBO&#xff08;基于规则的优化&#xff09;、CBO&#xf…...

Android 网络请求(二)OKHttp网络通信

学习笔记 OkHttp 是一个非常强大且流行的 HTTP 客户端库&#xff0c;广泛用于 Android 开发中进行网络请求。与 HttpURLConnection 相比&#xff0c;OkHttp 提供了更简单、更高效的 API&#xff0c;特别是在处理复杂的 HTTP 请求时。 如何使用 OkHttp 进行网络请求 以下是使…...