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
·
当前问题:
比如当前路由为: `/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条内容
所有评论(0)