Nuxt3 动态路由URL不更改的前提下参数更新，NuxtLink不刷新不跳转，生命周期无响应解决方案
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]
本人更推荐使用思路一，而不用思路二
原因有三：
- 目录结构简单清晰易懂，层层嵌套反而迷惑性大大提高
- 此种改法，对改造性项目不友好，改造力度过大
- 当你跑路时，接手的同事会痛苦
原文地址：https://blog.csdn.net/qq_43869364/article/details/143884117
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！