营销型网站建设广告语家庭优化大师免费下载

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