vue 跳转 同一路由不刷新问题解决
vue跳转同一路径时,路由参数改变,但页面无法更新
问题原因
vue路由切换实际是组件间的切换,引用相同组件的时候,页面就无法更新
解决方案
方案1.watch监听路由参数变化,并重新渲染(谨慎选择)
该可以实现页面重新加载数据效果,但会出现页面单独刷新出错,滚动条没有返回顶部问题,根据业务需要选择此解决方法
方案2. provide和inject结合使用(推荐使用)
实现思路:在app.vue目录下,对<router-view></router-view>进行摧毁和重建(通过变量routerAlive的状态控制),页面会进行重新渲染。
下面是方案2的具体实现:
//app.vue
<template>
<div id="app">
<router-view v-if="routerAlive" />
</div>
</template>
<script>
export default {
data(){
return{
routerAlive:true
}
},
provide(){
return {
routerRefresh: this.routerRefresh
}
},
methods:{
routerRefresh(){
this.routerAlive = false;
this.$nextTick(()=>{
this.routerAlive = true;
});
},
}
}
</script>
//page.vue
<template>
<div>
<div>跳转到当前页,并改变参数,重新渲染</div>
<button @click="linkToCurPage">跳转</button>
</div>
</template>
<script>
export default {
inject:['routerRefresh'], //在子组件中注入在父组件中创建的属性
data() {
return {
paramsData:this.$route.query.paramsName,//当前页面url所带参数 假设为1
}
},
mounted(){
//渲染页面数据
this.getData();
},
methods:{
//页面数据请求
getData(){
const that=this;
//请求参数
let params={
params:this.paramsData
};
//发送请求...
},
//跳转页面
linkToCurPage:function(){
this.paramsData=2; //更改参数信息
this.$router.push({
path:"/page",
query:{
paramsName:this.paramsData
}
this.routerRefresh();//调用app.vue里面的routerRefresh()方法,完成摧毁和重建过程
},
}
};
</script>
posted on 2021-04-12 10:13 zyp_java_net 阅读(546) 评论(0) 编辑 收藏 举报
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步