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

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Cyberchef使用功能之-多种压缩/解压缩操作对比

cyberchef的compression操作大类中有大量的压缩和解压缩操作,每种操作的功能和区别是什么,本章将进行讲解,作为我的专栏《Cyberchef 从入门到精通教程》中的一篇,详见这里。 关于文件格式和压缩算法的理论部分在之前的文章《压缩…

Leetcode 回文数

下面是解决这个回文数问题的一个Java解法: 代码解释 特殊情况处理: 如果数字是负数,直接返回false,因为负数不可能是回文数。如果数字以0结尾,但不是0本身,也不可能是回文数(例如10不是回文数…

笔记02----重新思考轻量化视觉Transformer中的局部感知CloFormer(即插即用)

1. 基本信息 论文标题: 《Rethinking Local Perception in Lightweight Vision Transformer》中文标题: 《重新思考轻量化视觉Transformer中的局部感知》作者单位: 清华大学发表时间: 2023论文地址: https://arxiv.org/abs/2303.17803代码地址: https://github.com/qhfan/CloF…

JVM垃圾回收详解(重点)

堆空间的基本结构 Java 的自动内存管理主要是针对对象内存的回收和对象内存的分配。同时,Java 自动内存管理最核心的功能是 堆 内存中对象的分配与回收 Java 堆是垃圾收集器管理的主要区域,因此也被称作 GC 堆(Garbage Collected Heap&…

深入探索Python集合(Set)的高效应用:数据处理、性能优化与实际案例分析

文章目录 前言🪁一、 定义集合1.1 使用大括号 {} 定义集合1.2 使用 set() 函数定义集合 🪁二、添加元素2.1 使用 add() 方法2.2 使用 update() 方法 🪁三、移除元素3.1 使用 remove() 方法3.2 使用 discard() 方法3.3 使用 pop() 方法3.4 使用…

STM32单片机CAN总线汽车线路通断检测-分享

目录 目录 前言 一、本设计主要实现哪些很“开门”功能? 二、电路设计原理图 1.电路图采用Altium Designer进行设计: 2.实物展示图片 三、程序源代码设计 四、获取资料内容 前言 随着汽车电子技术的不断发展,车辆通信接口在汽车电子控…

NIST 发布后量子密码学转型战略草案

美国国家标准与技术研究所 (NIST) 发布了其初步战略草案,即内部报告 (IR) 8547,标题为“向后量子密码标准过渡”。 该草案概述了 NIST 从当前易受量子计算攻击的加密算法迁移到抗量子替代算法的战略。该草案于 2024 年 11 月 12 日发布,开放…

Javaweb梳理17——HTMLCSS简介

Javaweb梳理17——HTML&CSS简介 17 HTML&CSS简介17.1 HTML介绍17.2 快速入门17.3 基础标签17.3 .1 标题标签17.3.2 hr标签17.3.3 字体标签17.3.4 换行17.3.8 案例17.3.9 图片、音频、视频标签17.3.10 超链接标签17.3.11 列表标签17.3.12 表格标签17.3.11 布局标签17.3.…

【支持向量机(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思想…

mysql bin log分析

centos7 部署collabora office (yum版 与 docker)_collabora office部署-CSDN博客 1.下载polardb的bin log文件 show binary logs; mysqlbinlog -u 用户名 -p -h 地址 --read-from-remote-server --raw mysql-bin.001768 mysqlbinlog --no-defaults --databasexxx --base64-…

初识进程——Linux

目录 概述 进程控制块 指令知识补充 标识符函数 /proc 目录介绍 /proc/(pid) cwd exe: fork 结束语 概述 进程是程序执行的实体,两者之间有着密切联系。程序是静态的代码与指令集合,每次运行程序都会创建新的进程…

湘潭大学软件工程算法设计与分析考试复习笔记(三)

回顾 湘潭大学软件工程算法设计与分析考试复习笔记(一)湘潭大学软件工程算法设计与分析考试复习笔记(二) 前言 现在继续开始复习。每天复习一点点,嘿嘿。今天本来准备写一个动态规划的题的,感觉半懂不懂…

109. UE5 GAS RPG 实现检查点的存档功能

在这一篇文章里,我们接着实现存档的功能,保存当前玩家的生成位置,游戏里有很多中方式去实现玩家的位置存储,这里我们采用检查点的方式,当玩家接触到当前检查点后,我们可以通过检查点进行保存玩家的状态&…

如何创建一个项目用于研究element-plus的原理

需求:直接使用element-plus未封装成组件的源码,创建一个项目,可以使用任意的element-plus组件,可以深度研究组件的运行。例如研究某一个效果,如果直接在node_modules修改elment-plus打包之后的那些js、mjs代码&#xf…

机器学习day7-线性回归3、逻辑回归、聚类、SVC

7欠拟合与过拟合 1.欠拟合 模型在训练数据上表现不佳,在新的数据上也表现不佳,常发生在模型过于简单无法处理数据中的复杂模式时。 特征: 训练误差较高 测试误差也高 模型过于简化,不能充分学习训练数据中的模式 2.过拟合 …

反向代理模块

1 概念 1.1 反向代理概念 反向代理是指以代理服务器来接收客户端的请求,然后将请求转发给内部网络上的服务器,将从服务器上得到的结果返回给客户端,此时代理服务器对外表现为一个反向代理服务器。 对于客户端来说,反向代理就相当于…

STM32 独立看门狗(IWDG)详解

目录 一、引言 二、独立看门狗的作用 三、独立看门狗的工作原理 1.时钟源 2.计数器 3.喂狗操作 4.超时时间计算 5.复位机制 四、独立看门狗相关寄存器 1.键寄存器(IWDG_KR) 2.预分频寄存器(IWDG_PR) 3.重载寄存器&…

足球虚拟越位线技术FIFA OT(二)

足球虚拟越位线技术FIFA OT(二) 在FIFA认证测试过程中,留给VAR系统绘制越位线的时间只有90秒(在比赛中时间可能更短),那么90秒内要做什么事呢,首先场地上球员做出踢球动作,然后VAR要…

MySQL数据库3——函数与约束

一.函数 1.字符串函数 MySQL中内置了很多字符串函数,常用的几个如下: 使用方法: SELECT 函数名(参数);注意:MySQL中的索引值即下标都是从1开始的。 2.数值函数 常见的数值函数如下: 使用方法: SELECT…

Proteus 8.17的详细安装教程

通过百度网盘分享的文件:Proteus8.17(64bit).zip 链接:https://pan.baidu.com/s/1zu8ts1Idhgg9DGUHpAve7Q 提取码:8q8v 1.右击【Proteus8.17(64bit).zip】,选择【全部解压缩......】。 , 2.…