一、window.history.go()方法刷新上一页
使用window.history.go()方法可以实现返回上一页并且实时刷新页面。这个方法是HTML5新增的API之一，可以让我们控制浏览器的历史纪录，以及前进和后退的效果。在Vue中，我们可以通过监听路由的变化来实现页面的刷新。下面是示例代码：
// 监听路由
watch: {
$route(to, from) {
if(from.path === '/previousPage') {
window.history.go(0);
}
}
}
二、使用Bus实现
除了使用window.history.go()方法，我们还可以使用Bus来实现页面的刷新。在父组件中注册一个Bus，子组件就可以通过emit来触发父组件中的方法，然后在方法中刷新页面。下面是示例代码：
// 父组件
import EventBus from '@/plugins/EventBus.js'
export default {
methods: {
refreshPage() {
window.location.reload();
}
},
mounted() {
EventBus.$on('refresh', () => {
this.refreshPage();
});
}
}
// 子组件
import EventBus from '@/plugins/EventBus.js'
export default {
methods: {
refreshPage() {
EventBus.$emit('refresh');
}
}
}
三、使用meta标签禁用缓存
我们还可以通过使用meta标签来禁用缓存，每次访问页面都会重新加载，达到刷新的效果。下面是示例代码：
export default {
methods: {
goBack() {
window.history.go(-1);
}
},
mounted() {
// 禁用缓存
let head = document.getElementsByTagName('head')[0];
let meta = document.createElement('meta');
meta.setAttribute('http-equiv', 'Cache-Control');
meta.setAttribute('content', 'no-cache, no-store, must-revalidate');
meta.setAttribute('pragma', 'no-cache');
meta.setAttribute('expires', '0');
head.appendChild(meta);
}
}
四、使用location.reload()方法刷新
最后一种方法是使用location.reload()方法来实现页面的实时刷新。这个方法会重新加载当前页面，如果我们需要刷新上一页，就需要在返回上一页后再次使用location.reload()方法。示例代码如下：
export default {
methods: {
goBack() {
window.history.go(-1);
location.reload();
}
}
}
总结
我们可以使用多种方法实现返回上一页并且实时刷新页面的效果。不同的方法适用于不同的场景，我们需要根据具体情况来选择最合适的方法。在实际开发中，我们可以根据项目需求来选择适合项目的方法。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/279757.html
微信扫一扫 
支付宝扫一扫 