网络公司 网站建设,两个网站php 一个空间,自贸区注册公司,深圳网Nuxt3 动态路由URL不更改的前提下参数更新#xff0c;NuxtLink不刷新不跳转#xff0c;生命周期无响应解决方案
首先说明一点#xff0c;Nuxt3 的动态路由响应机制是根据 URL 是否更改#xff0c;参数的更改并不会触发 Router 去更新页面#xff0c;这在 Vue3 上同样存在…Nuxt3 动态路由URL不更改的前提下参数更新NuxtLink不刷新不跳转生命周期无响应解决方案
首先说明一点Nuxt3 的动态路由响应机制是根据 URL 是否更改参数的更改并不会触发 Router 去更新页面这在 Vue3 上同样存在。
以下描述三种路由类型
可直达URL变化 的静态路由/pages/news/index.html可直达URL动态变化 的动态路由/pages/news/1.html可直达URL、多参数动态变化的 动态路由/pages/news/1.html?typeprivacy
暂且称 2 为 单参动态路由3 为 多参动态路由
单参动态路由 和 多参动态路由 都是动态路由但URL、参数动态变化 的动态路由当你只更新参数而URL无改变的情况下使用 NuxtLink 来实现页面刷新渲染页面并不会刷新执行服务端渲染而是一点反应都没有。 原因是
动态路由监听的是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]
本人更推荐使用思路一而不用思路二 原因有三
目录结构简单清晰易懂层层嵌套反而迷惑性大大提高此种改法对改造性项目不友好改造力度过大当你跑路时接手的同事会痛苦
