路由跳转带id跳转过去白屏
时间: 2023-10-23 17:14:45 浏览: 136
路由技术解决页面跳转问题
在路由跳转时,如果希望跳转到指定页面并携带参数,有时会出现跳转后页面出现白屏的情况。有两种思路可以解决这个问题。
思路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 ]
阅读全文