刷新vue页面不出现404的方法

        最近在做vue项目的时候遇到一个问题，就是执行完一个方法后需要刷新页面才能更新页面的数据，但是调用刷新页面的函数后页面报404了，当然这是在测试环境，本地开发环境是没有这个问题的。刷新页面的方法用了网上搜到的以下三种常用方式：

1、location.reload()

2、history.go(0)

3、this.$router.go(0)

        这三种方式均能刷新页面，但是执行后都会出现404页面，本人项目用的是history路由模式，有老铁说将其改为hash模式就有用了，又或者修改nginx的配置参数也能奏效，这两种方式我只用了第一种，换成hash模式后不知怎的连接后台的接口都不通了，nginx配置参数不敢随便改所以我没试第二种方法，我在想有没有一种方式，既能不改路由模式，又能刷新后不出现404呢？摸索一阵子后发现答案还是有的，就是换一种刷新页面的方式。

        我们知道上述三种刷新页面的方式都有类似在浏览器中按F5的效果，一执行不但会重新调用本页面的所有后台接口，还会刷新页面中的所有dom结点，属于全局刷新。下面这种简单暴力的刷新方法属于局部刷新，可以避免404的出现。

1、首先在App.vue中添加如下代码：

<template>
    <div id="app">
        <router-view v-if = "showData"></router-view>
    </div>
</template>

<script>
export default{
    name: 'app',
    //提供并暴露刷新方法
    provide() {
        return {
            refresh: this.reload
        }
    },
    data() {
        return{
            showData: true,
        }
    },
    methods: {
        //刷新页面方法
        reload() {
            //通过切换router-view的显示与隐藏来控制页面的重新加载
            this.showData = false
            this.$nextTick (function() {
                 this.showData = true
            })
        }
    }
}
</script>

2、在需要做刷新操作的页面（如Mypage.vue）添加如下代码：

<template>
    <div id="Mypage">
        自定义展示内容
    </div>
</template>

<script>
export default{
    //将App.vue中的刷新方法注入本页面
    inject: ['refresh'],
    data() {
        return{}
    },
    methods: {
        //自定义方法
        selfFunction(){
            ………………  //自定义执行语句
            this.$nextTick(
                this.refresh()   //自定义语句执行完后调用刷新页面的方法
            )
        }
    }
}
</script>