当前问题:

	比如当前路由为: `/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 }
	})
	
Logo

前往低代码交流专区

更多推荐