路由地址的变化例如下面:
http://localhost:8080/#/category/1013001
-->地址相同,只有参数发生变化
http://localhost:8080/#/category/1013304
同一个地址携带不同的参数跳转内容并没有更新
原因:
地址的变化了,其实本路由对应的path并没有变化(还是#/category),是参数变化了。此时当前路径匹配的组件会被直接复用,这个组件在地址切换的过程中,并没有重新销毁生成,或导致页面白屏的情况出现,也就说,setup(vue3组合式API)只是执行了第一次。
解决方式:
1.强制销毁组件给router-view
添加key属性
<router-view :key="$route.fullPath"/>
原理:https://cn.vuejs.org/api/built-in-special-attributes.html#key
2.使用watch侦听器,侦听路由参数的变化
将请求数据的逻辑代码放在侦听器中:
- watch(() => route.params.id, (newVal) => {
- console.log('route.params.id变化了...', newVal)
-
- // 逻辑代码 ........
-
- }, { immediate: true })
- // immediate 侦听器的三个参数之一,作用:一进入页面就触发一次
- }