Vue中刷新当前页的几种方式

最推荐的解决方案。就是通过 v-if 控制 <router-view> 的显示，如果要刷新页面，则将 <router-view> 销毁再重建一次即可。具体实现代码如下：
主要改造的就是 App.vue 文件

<template>
    <div id="app">
        <RouterView v-if="isRouterAlive" />
    </div>
</template>

<script>
export default {
    provide() {
        return {
            reload: this.reload
        }
    },
    data() {
        return {
            isRouterAlive: true
        }
    },
    methods: {
        reload() {
            this.isRouterAlive = false
            this.$nextTick(() => (this.isRouterAlive = true))
        }
    }
}
</script>

通过 Vue 的 provide / inject ，将 App.vue 里的 reload() 方法注入到子页面里，这样在子页面里就可以通过这样的方式使用了。

<script>
export default {
    inject: ['reload'],
    methods: {
        func() {
            this.reload()
        }
    }
}
</script>

当然还可以更极致一点，就是直接在 App.vue 里监听路由的变化，如果当前路由和上一个路由的 name 属性一样，则可以认为是刷新页面操作，自动执行 reload() 方法。

<template>
    <div id="app">
        <RouterView v-if="isRouterAlive" />
    </div>
</template>

<script>
export default {
    provide() {
        return {
            reload: this.reload
        }
    },
    data() {
        return {
            isRouterAlive: true
        }
    },
    watch: {
        $route: 'routeChange'
    },
    methods: {
        reload() {
            this.isRouterAlive = false
            this.$nextTick(() => (this.isRouterAlive = true))
        },
        routeChange(newVal, oldVal) {
            if (newVal.name == oldVal.name) {
                this.reload()
            }
        }
    }
}
</script>

这样的好处在于，如果是在同一个路由，但不同参数间的跳转，能实现自动刷新页面。例如商城系统里最常见的，从一个商品详情页跳转到另一个商品详情页，这个时候，路由其实是没变化的，变化的只是 params 或者 query ，就不需要手动再去执行注入的 reload() 方法了。