在hash模式下 vue跳转相同路由的时候页面不会刷新,使用场景往往是点击头部导航,需要页面进行刷新当前页面。
解决问题:
1.在app.vue里面 在data里面添加isReload变量,在router-view里面引入v-if= “isReload”
<div id="app">
<router-view v-if="isReload" />
</div>
2.在相应的js里面添加
export default {
data(){
return {
isReload:true
}
}
provide() {
return {
reload: this.reload,
};
},
methods:{
reload() {
this.isReload= false;
this.$nextTick(() => {
this.isReload= true;
});
},
}
}
3.在使用相关使用的vue文件中跳转目前的路由时。
export default {
inject: ["reload"],
methods:{
goUrl(){
this.reload();
}
}
}
此时当调用goUrl方法的时候,就会刷新当前的页面了。
本文介绍了如何在Vue应用中通过isReload变量配合提供/注入机制,实现点击头部导航时路由刷新但不重新加载整个页面。通过设置isReload布尔值,巧妙地控制router-view的渲染,提升用户体验。
1万+

被折叠的 条评论
为什么被折叠?



