weixin_58412143
2022-03-30 13:20
采纳率: 100%
浏览 71
已结题

Vue通过在APP页面进行刷新后不起作用

情景:初始页面为登录页,登录成功后进入首页,首页有一个点击事件退回到登录页
问题:1、从登录页进入首页时,得手动刷新页面才自适应;2、点击退回后得手动刷新登录页样式才正常
登录页——

  export default {
    inject:['reload'],
}
//调取WebSocket
getWebSocketVal1() {
        const that = this;
        let LOGUrl = "ws://" + location.host +"/ws" + this.LOGUrl;
        // 连接WebSocket
        let LOGwebsocket = new WebSocket(LOGUrl);
        // WebSocket 连接成功时
        LOGwebsocket.onopen = function() {
          //发送信息
          LOGwebsocket.send(JSON.stringify(that.data));
        };
        //获取 websocket 返还数据
        LOGwebsocket.onmessage = function(res) {
          that.val = JSON.parse(res.data)
          if (that.val == undefined) {
            alert('登陆中')
          } else {
//进入首页
            if (that.val.login) {
              // that.$router.go(1)
              that.$router.push('/dark')
              that.reload()
            } else {
              console.log('错误')
              alert(that.val.msg)
            }
          }
        }
      },
changeInput() {
        if (this.data.name == null || this.data.code == null) {
          alert("输入内容不能为空")
        } else {
          this.getWebSocketVal1()
        }
      }

首页——

  export default {
    inject:['reload'],
}
<!-- <router-link to="./"> -->
                <img @click="update()" class="lj-img" src="../../assets/lj.png" alt="" />
 <!-- </router-link> -->
//退回登录页
update(){
           // this.$router.back(-1)
           // this.$router.push({path:'/'})
           this.$router.go(-1)
           this.reload()
        },

APP.vue——

<template>
  <div id="app">
    <router-view v-if="isReload"  :key="$route.fullPath"/>
  </div>
</template>

<script>
export default {
  name: 'App',
  created() {
    let theme = localStorage.getItem('theme')
        if(!theme || theme === 'dark'){
          window.document.documentElement.setAttribute('data-theme', 'dark')
        }else{
          window.document.documentElement.setAttribute('data-theme', 'light')
        }

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

2条回答 默认 最新

相关推荐 更多相似问题