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

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条回答 默认 最新

  • bdawn 2022-03-30 15:30
    关注

    箭头函数里别用this

    reload() {
         const that = this
          that.isReload = false
          that.$nextTick(() => {
            that.isReload = true
          })
        }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 4月19日
  • 已采纳回答 4月11日
  • 创建了问题 3月30日

悬赏问题

  • ¥20 wireshark抓不到vlan
  • ¥20 关于#stm32#的问题:需要指导自动酸碱滴定仪的原理图程序代码及仿真
  • ¥20 设计一款异域新娘的视频相亲软件需要哪些技术支持
  • ¥15 stata安慰剂检验作图但是真实值不出现在图上
  • ¥15 c程序不知道为什么得不到结果
  • ¥40 复杂的限制性的商函数处理
  • ¥15 程序不包含适用于入口点的静态Main方法
  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位,为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后,界面没有,cadence 启动不起来