vue页面刷新 provide/inject|this.$router.replace|location.reload()

一、使用provide/inject方式

二、使用this.$router.replace

三、location.reload()

第一种方式：经常使用于整个页面刷新

• provide：Object | () => Object
• inject：Array | { [key: string]: string | Symbol | Object }

这对选项须要一块儿使用，已容许一个祖先组件像全部子孙后代注入一个依赖，不管层次多深，并在上下游关系成立的时间里始终生效。

provide 和 inject 绑定并非可响应的，然而，若是传了一个可监听的对象，那么其对象的属性仍是可响应的。

要想作到页面刷新，只需在app.vue中定义provide,在其子孙组件的点击事件中刷新整个页面。

app.vue

<router-view v-if="isAlive" />

export default{
    provide(){
        return {
            reload:this.reload
        }
    },
    data(){
        return {
            isAlive: true
        }
    },
    methods:{
        reload(){
            this.isAlive = false
            this.$nextTick(() => {
                this.isAlive = true
            })
        }
    }
}
复制代码

子组件

export default{
    inject:['reload'],
    methods:{
        handleChange(){
            this.reload()
        }
    }
}
复制代码

第二种方式：经常使用于路由切换

核心思想是重定向到一个空白页面，在返回当前页面，缺点是路由会变换两次

先创建redirect页面

export default {
  beforeCreate() {
    const { query } = this.$route
    const path = query.path
    this.$router.replace({ path: path })
  },
  mounted() {},
  render: function(h) {
    return h() // avoid warning message
  }
}
复制代码

导航Item点击事件

clickLink(routePath){
    const fullPath = encodeURI(routePath)
    this.$router.replace({
        path: '/redirect',
        query: {
            path: encodeURI(fullPath)
        }
    })
}
复制代码

还可解决其余页面刷新问题，好比网速慢的时候，你点击了生成某个列表，网速太慢你想去其余页面，在返回来的时候看到的可能不是最新数据，这时候你也可使用此种方式，从新刷新页面，，，

第三种方式: 缺点就是会出现空白页面

简单粗暴
location.reload()
复制代码