情景:初始页面为登录页,登录成功后进入首页,首页有一个点击事件退回到登录页
问题: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>