vue路由跳转白屏问题

22 篇文章 0 订阅
19 篇文章 0 订阅

当前问题:

	比如当前路由为: `/projectDetail?Id=1&name=页面1`
	通过页面改变了路由参数Id  `/projectDetail?Id=2&name=页面1`
	此时做的操作是:
		this.$router.push({
		  name: 'projectDetail',
		  query: { Id: this.id, name: this.name }
		})
		this.$router.go(0)
		
   在这种情况下,会导致页面整体刷新,且出现整个界面的一个白色闪屏出现

解决办法:

思路1:通过一个空白页进行页面的路由跳转

	在需要跳转的地方:
	this.$router.replace({
        path: "redirect",
        query: { Id: this.id, name: this.name }
    })

	引入一个中间跳转文件:
	<template>
	  <div>
	    <!-- 解决更新路由导致页面空白屏的问题 -->
	  </div>
	</template>
	<script>
	export default {
	  name: 'reload',
	  props: {},
	  beforeCreate() {
	    const { query } = this.$route
	      this.$router.replace({
	        name: 'projectDetail',
	        query: query
	      })
	  },
	  render(h) {
	    return h()
	  }
	}
	</script>

思路2:在 projectDetail 界面,最外层标签 给定唯一的key. :key="$route.fullPath"

	此时做的操作是:
	<template>
		<div :key="$route.fullPath">
			内容区
		</div>
	</template>
	
	改变当前页面路由
	this.$router.push({
	  name: 'projectDetail',
	  query: { Id: this.id, name: this.name }
	})
	
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
引用中提到,页面白屏的原因是因为路由无法匹配到正确的路径。当使用next(to.path)强制再次进入路由守卫时,可能会导致死循环,进而导致浏览器无法正常显示页面。 引用中指出,当刷新页面时,控制台会输出错误信息,提示找不到匹配路径的路由。这可能是由于路由配置不正确,或者路由守卫没有正确触发。 引用中提到,在控制台报错时,并没有进入路由守卫的情况。因此,在路由守卫中配置任何内容或重新添加动态路由到session或vuex中都是无效的,因为在进入路由守卫之前就已经出现了错误。 综上所述,vue路由跳转页面白屏可能是由于路由配置错误,路由守卫未正确触发或者存在其他代码问题导致的。如果遇到这个问题,可以检查路由配置是否正确,确保路由守卫能够正常触发,并检查其他可能导致页面白屏的代码问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [真正有效解决vue addRoute动态添加路由后刷新页面白屏的靠谱方法及思路,切实可行!](https://blog.csdn.net/qq_37150410/article/details/128012829)[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_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值