[JavaScript知识库]vue中页面跳转白屏的解决方式，同一路由地址，参数不同跳转白屏的解决方式

路由地址的变化例如下面：

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 侦听器的三个参数之一，作用：一进入页面就触发一次
  }