简述
在vue项目开发过程中，有的时候数据不好清空，加载不及时，需要页面做一个强制的刷新，来实现数据及时更新的效果。
方法一
js强制刷新，不推荐使用，因为这种方式虽然可以最简单粗暴的实现效果，但是刷新的时候会有一个空白的间隔期，用户体验不好，所以不推荐使用。
虽然不推荐使用，但是方法还是要交代的。
在需要的地方直接加入这行代码就OK了：window.location.reload();
我是用来解决cookies数据及时存放获取问题的，效果实现，体验不好
// cityCode 持久化 import Cookies from 'js-cookie' const cityKey = 'fcyz-cityCode' export function getCode() { return Cookies.get(cityKey) } export function setCode(code) { window.location.reload(); return Cookies.set(cityKey, code) } export function removeCode() { return Cookies.remove(cityKey) }
方法二 强力推荐
这个方法我是解决另一个问题的，上一次的数据不容易清空，数据更新不及时，所以强制刷新页面，实现数据及时更新。
步骤一 修改App.vue 直接拷贝
<template> <div id="app"> <router-view v-if="isRouterAlive"></router-view> </div> </template> <script> export default { name: 'app', provide () { return { reload: this.reload } }, data () { return { isRouterAlive: true } }, methods: { reload () { this.isRouterAlive = false this.$nextTick(() => { this.isRouterAlive = true }) } } } </script>
步骤二 在需要强制刷新的组件声明reload方法（这个有点儿像mixin的使用），通过控制router-view的显示隐藏使页面再次加载。
export default { name:'index', inject: ['reload'], // 这里得引入，像使用mixin一样 watch: { "$route.params.id": { handler(val) { this.reload() //直接调用,强制刷新页面 } }, }, }
