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

柔情只为你懂 2023-10-11 23:16 39阅读 0赞

最近在做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>