当使用路由传参进行页面切换或数据请求,且路由的路径path没有发生变化时，由于路由的组件复用机制，路由对应的组件会被缓存起来直接复用，也就是生命周期钩子函数不再执行，钩子函数中的请求不会再次发起,数据得不到更新,页面数据不会变化
解决方式1:
在<router-view />标签内设置Key值为$route.fullpath
原理: vue中更新虚拟DOM时,它默认用 “就地复用” 策略。在发现有相同标签时,vue会尽可能的复用,而不是再次渲染,这样达到更加高效，减少DOM操作量，提高性能的目的,当没有设置key值时,path路径没有改变,组件被缓存,没有再次创建页面,而是复用了页面,所以生命周期钩子函数不执行,请求不到数据,当设置key值后,路径参数会改变,组件会被销毁重新创建,这时生命周期钩子函数再次执行,页面数据就可以成功请求
缺点:会浪费一些性能,增加DOM操作量
解决方式2:
使用Watch侦听器侦听
原理: 侦听路由参数状态,当参数改变时就发起请求 通过watch侦听比第一种方式更好,因为没有再次渲染dom元素,而是只修改了数据
缺点:vue3中侦听器的功能还没有完善,存在一些bug
解决方式3:
onBeforeRouteUpdate()生命周期钩子函数
在路由跳转之后更新之前执行
// 语法
// to为即将跳转的目标路由对象
onBeforeRouteUpdate((to)=>{
在该生命周期内执行
})
原理:onBeforeRouteUpdate()是router实例身上的一个生命周期钩子函数,会侦听路由参数状态,当参数改变时就执行回调
