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

news2024/11/20 18:52:15

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. 当你跑路时,接手的同事会痛苦

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

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

相关文章

Pytest 学习 @allure.severity 标记用例级别的使用

一、前言 使用allure.serverity注解,可以在allure报告中清晰的看到不同级别用例情况 使用等级介绍 allure提供的枚举类 二、等级介绍 二、等级介绍 blocker:阻塞缺陷(功能未实现,无法下一步) critical:…

[javascript]js的五子棋让红蓝双方自己跟自己下棋

运行效果&#xff08;这是未分出胜负&#xff09;&#xff1a; 这是分出胜负&#xff1a; 源代码&#xff0c;把下边的代码放到1.html&#xff0c;然后用浏览器打开&#xff0c;就可以&#xff0c;然后刷新网页&#xff1a; <!DOCTYPE html> <html><body>&l…

Go语言中AES加密算法的实现与应用

一、前言 在当今的软件开发领域&#xff0c;数据安全至关重要。加密技术作为保护数据机密性的关键手段&#xff0c;被广泛应用于各个方面。AES&#xff08;高级加密标准&#xff09;作为一种对称加密算法&#xff0c;以其高效性和安全性在众多加密场景中占据重要地位。本文将详…

单片机GPIO中断+定时器 实现模拟串口接收

单片机GPIO中断定时器 实现模拟串口接收 解决思路代码示例 解决思路 串口波特率9600bps,每个bit约为1000000us/9600104.16us&#xff1b; 定时器第一次定时时间设为52us即半个bit的时间&#xff0c;其目的是偏移半个bit时间&#xff0c;之后的每104us采样并读取1bit数据。使得…

近几年新笔记本重装系统方法及一些注意事项

新笔记本怎么重装系统&#xff1f; 近几年的新笔记本默认开启了raid on模式或vmd选项&#xff0c;安装过程中会遇到问题&#xff0c;新笔记本电脑重装自带的系统建议采用u盘方式安装&#xff0c;默认新笔记本有bitlocker加密机制&#xff0c;如果采用一键重装系统或硬盘方式安装…

【支持向量机(SVM)】:算法原理及核函数

文章目录 1 SVM算法原理1.1 目标函数确定1.2 约束条件优化问题转换1.3 对偶问题转换1.4 确定超平面1.5 计算举例1.6 SVM原理小节 2 SVM核函数2.1 核函数的作用2.2 核函数分类2.3 高斯核函数2.3 高斯核函数API2.4 超参数 γ \gamma γ 1 SVM算法原理 1.1 目标函数确定 SVM思想…

自动驾驶系列—告别眩光烦恼:智能大灯如何守护夜间行车安全

&#x1f31f;&#x1f31f; 欢迎来到我的技术小筑&#xff0c;一个专为技术探索者打造的交流空间。在这里&#xff0c;我们不仅分享代码的智慧&#xff0c;还探讨技术的深度与广度。无论您是资深开发者还是技术新手&#xff0c;这里都有一片属于您的天空。让我们在知识的海洋中…

无插件H5播放器EasyPlayer.js RTSP播放器chrome/edge等浏览器如何使用独立显卡

随着互联网的快速发展和视频内容的日益丰富&#xff0c;HTML5视频播放器已成为网页视频播放的主流技术。EasyPlayer.js播放器视频播放技术不仅支持多种浏览器和设备&#xff0c;还提供了丰富的功能和更好的用户体验。 那么chrome/edge等浏览器如何使用独立显卡&#xff1f; 在…

@Autowired 和 @Resource思考(注入redisTemplate时发现一些奇怪的现象)

1. 前置知识 Configuration public class RedisConfig {Beanpublic RedisTemplate<String, Object> redisTemplate(RedisConnectionFactory factory) {RedisTemplate<String, Object> template new RedisTemplate<>();template.setConnectionFactory(facto…

STM32低功耗设计NFC与无线距离感应智能钥匙扣-分享

目录 目录 前言 一、本设计主要实现哪些很“开门”功能&#xff1f; 二、电路设计原理图 1.电路图采用Altium Designer进行设计&#xff1a; 2.实物展示图片 三、程序源代码设计 四、获取资料内容 前言 智能钥匙扣作为一种小巧而实用的智能设备&#xff0c;凭借其便携性…

微服务day09

DSL查询 快速入门 GET /items/_search {"query": {"match_all": {}} } 叶子查询 GET /items/_search {"query": {"match_all": {}} }GET /items/_search {"query": {"multi_match": {"query": "脱…

Golang语言整合jwt+gin框架实现token

1.下载jwt go get -u github.com/dgrijalva/jwt-go2.新建生成token和解析token文件 2.1 新建common文件夹和jwtConfig文件夹 新建jwtconfig.go文件 2.2 jwtconfig.go文件代码 /* Time : 2021/8/2 下午3:03 Author : mrxuexi File : main Software: GoLand */ package jwtC…

Orcad 输出有链接属性的PDF

安装adobe pdf安装Ghostscript修改C:\Cadence\SPB_16.6\tools\capture\tclscripts\capUtils\capPdfUtil.tcl ​ 设置默认打印机为 Adobe PDF ​ 将Ghostscript的路径修改正确 打开cadence Orcad &#xff0c;accessories->candece Tcl/Tk Utilities-> Utilities->PD…

Java读取WPS excel.xlsx嵌入图片

1. 背景&原因 经常有读取Excel文件的需求&#xff0c;开发者大多使用apache poi或者基于此的工具进行excel内容读取&#xff0c;前不久遇到了一个需求&#xff0c;读取每一行内容&#xff0c;但每一行都包含图片文件&#xff0c;发现无法通过已封装的工具读取excel的图片内…

Elasticsearch 查询时 term、match、match_phrase、match_phrase_prefix 的区别

Elasticsearch 查询时 term、match、match_phrase、match_phrase_prefix 的区别 keyword 与 text 区别term 查询match 查询match_phrase 查询match_phrase_prefix 查询写在最后 在讲述 es 查询时 term、match、match_phrase、match_phrase_prefix 的区别之前&#xff0c;先来了…

ERROR TypeError: AutoImport is not a function

TypeError: AutoImport is not a function 原因&#xff1a;unplugin-auto-import 插件版本问题 Vue3基于Webpack&#xff0c;在vue.config.js中配置 当unplugin-vue-components版本小于0.26.0时&#xff0c;使用以下写法 const { defineConfig } require("vue/cli-se…

iOS 18 导航栏插入动画会导致背景短暂变白的解决

问题现象 在最新的 iOS 18 系统中,如果我们执行导航栏的插入动画,可能会造成导航栏背景短暂地变为白色: 如上图所示:我们分别向主视图和 Sheet 弹出视图的导航栏插入了消息,并应用了动画效果。可以看到,前者的导航栏背景会在消息插入那一霎那“变白”,而后者则没有任何…

PHP屏蔽海外IP的访问页面(源代码实例)

PHP屏蔽海外IP的访问页面&#xff08;源代码实例&#xff09;&#xff0c;页面禁用境外IP地址访问 <?php/*** 屏蔽海外ip访问* 使用ip2long函数得到ip转为整数的值&#xff0c;判断值是否在任一一个区间中* 以下是所有国内ip段* 调用方法&#xff1a;IschinaIp($ALLIPS)* …

SpringBoot 增量部署发布(第2版)

一、背景介绍 书接上一篇《SpringBoot 增量部署发布_springboot增量部署-CSDN博客》&#xff0c;上一篇内容实现了将静态资源与jar分离&#xff0c;但是即使是打包成**-exec.jar&#xff0c;解压jar文件&#xff0c;可以看到里面包含了static&#xff0c;resource目录&#xf…

单片机智能家居火灾环境安全检测-分享

目录 前言 一、本设计主要实现哪些很“开门”功能&#xff1f; 二、电路设计原理图 电路图采用Altium Designer进行设计&#xff1a; 三、实物设计图 四、程序源代码设计 五、获取资料内容 前言 传统的火灾报警系统大多依赖于简单的烟雾探测器或温度传感器&#xff0c;…