一、前言:最近整理出来近一个月遇到的bug和学到的东西,但是写在了纸质版上面,所以打算慢慢share到博客中。今天完成工作后正好有时间,就先分享其中的一个bug。这个系列应该会持续更新。
二、正文:
bug一:根据id跳转商品详情的时候,在onMounted中拿到路由传参带过来的id后,重新发请求,根据id切换url渲染不同id的不同详情。但是hash模式下,url可以顺利切换,但是页面不刷新。
原因一:路由配置meta中的keepAlive属性值为true时,状态就会被缓存。此时切换url页面不会重新加载,不走onMounted钩子。因此在onMounted中重新发请求代码并不会执行。
对策一:keepAlive:false;==》组件状态不会被保持,会正常销毁和创建,创建时会调用onMounted钩子。
对策二:将onMoubted钩子换成onActiveted钩子。在这个钩子重新发请求。
——————————此时还是不行————————
原因二:setup语法糖写的,没有组件名export defalut下的name,,route要求跳转路由时,必须是组件名,而不是文件名。此时route没有name属性,就不知道用什么来引用该组件,导致跳转出现问题。
对策三:添加name属性。
<script>
export default {
name: 'NumDetail'
}
<script>