vue路由跳转白屏问题

当前问题:

	比如当前路由为: `/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 }
	})
	
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值