路由跳转带id跳转过去白屏

在路由跳转时，如果希望跳转到指定页面并携带参数，有时会出现跳转后页面出现白屏的情况。有两种思路可以解决这个问题。

思路1是通过使用一个空白页进行页面的路由跳转。具体做法是在需要跳转的地方使用`this.$router.replace`方法进行跳转，并指定要跳转的路径和参数。同时，引入一个中间跳转文件，在该文件中使用`beforeCreate`生命周期钩子函数来获取当前路由的参数，并再次使用`this.$router.replace`方法将路由跳转到指定页面。最后，通过在`render`函数中返回一个空节点来解决页面空白屏的问题。这样做的目的是避免页面更新导致的空白屏幕出现。

思路2是在路由跳转时，如果只是改变参数而不改变页面路径，可以使用`this.$router.push`方法来跳转，并在跳转后使用`this.$router.go(0)`方法来强制刷新页面。这种情况下，会导致整个页面刷新并出现一个白色闪屏。为了解决这个问题，可以通过在路由配置中添加`key`属性，将该属性与参数绑定，这样在参数变化时，页面会重新渲染而不会出现白屏问题。

综上所述，通过以上两种思路可以解决路由跳转时带参数导致的白屏问题。具体选择哪种方法取决于具体的需求和场景。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [vue路由跳转白屏问题](https://blog.csdn.net/weixin_43972213/article/details/120434415)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [vue中页面跳转白屏的解决方式，同一路由地址，参数不同跳转白屏的解决方式](https://blog.csdn.net/xu20166424/article/details/123966833)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]