Nuxt3 动态路由URL不更改的前提下参数更新,NuxtLink不刷新不跳转,生命周期无响应解决方案
首先说明一点,Nuxt3 的动态路由响应机制是根据 URL 是否更改,参数的更改并不会触发 Router 去更新页面,这在 Vue3 上同样存在。
以下描述三种路由类型:
- 可直达,URL变化 的静态路由:/pages/news/index.html,
- 可直达,URL动态变化 的动态路由:/pages/news/1.html
- 可直达,URL、多参数动态变化的 动态路由:/pages/news/1.html?type=privacy
暂且称 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]
本人更推荐使用思路一,而不用思路二
原因有三:
- 目录结构简单清晰易懂,层层嵌套反而迷惑性大大提高
- 此种改法,对改造性项目不友好,改造力度过大
- 当你跑路时,接手的同事会痛苦