一、 背景
点击按钮跳转到新页面,刷新新页面。 用vue-router 重新路由的时候到当前页面的时候是不进行刷新的。如果使用window.reload() 或者router.go(0) hisory.go(0) 刷新的时候整个浏览器进行刷新加载, 但是页面闪烁, 体验不好。
二、解决办法
使用:provide /inject 组合
作用是: 允许一个祖先组件向其所有子孙后代注入一个依赖, 无论组件层次有多深,并在其上下游关系成立时间里始终生效。
<template>
<div id="app">
<router-view v-if="isRouterAlive"/>
</div>
</template>
<script>
export default{
name: 'App',
provide(){
return{
reload:this.reload
}
},
data(){
return {
isRouterAlive:true,
}
},
methods:{
reload(){
this.isRouterAlive = false;
this.$nextTick(function () {
this.isRouterAlive = true
});
}
}
}
</script>
新增配置:
触发跳转页
inject 放在 export default中
跳转方法中添加this.reload();