vue provide和inject的使用

187 阅读1分钟

VUE跳转当前页面

**** vue跳转当前页面是不刷新的,比较简单的方法是window.onload()或则this.$router.go(0); 这样会有空白页的闪烁感 推荐使用provide和inject:

 // 在app.js ,通过提供一个reload方法实现页面的重新加载
    <router-view v-if="showState" />  
  name: 'App',
  data(){
  return {
  showState:true
  }
  },
  provide(){
    return {
      reload:this.reload
    }
  },

  methods:{
    reload(){
      this.showState = false;
      this.$nextTick(()=>{
        this.showState = true;
      })
    }
  }

user.js
 // 很重要!!! 监听路由的变化情况,包括通过浏览器的后退键前进键的变化的情况的
export default {
    inject:["reload"],
  data() {
    return {


  watch: {
  '$route' (to, from) { //监听路由是否变化
    if(this.$route.params.touid){//判断id是否有值
     // alert(this.$route.params.touid)
     this.reload();
    }
  }
},