起源:列表页-》详情页,点击返回列表页数据不刷新
问题:钉钉微应用开发,头部有添加按钮和标题,当页面不刷新时,同时标题和按钮也不再显示。
前提:列表页已经做了keepAlive缓存页面,并且进入列表页的有两个场景,详情页返回&新增页面返回
1.利用路由守卫和store进行解决
//list,列表页
computed: {
showAddbtn () { // 显示添加按钮
return this.$store.getters.count
}
},
watch: {
showAddbtn () {
dd.ready(() => {
// 获取动态标题
this.$store.dispatch({
type: 'dingtalk/setViewTitle',
title: this.moduleTitle // 显示为当前的模块名称
})
this.moduleTitle = localStorage.getItem('moduleTitle')
})
this.onInsert()
},
}
利用store的count的状态的变化,引起局部刷新,从而再次添加标题和按钮
//详情页中
beforeRouteLeave (toRoute, fromRoute, next) {
if (toRoute.name === 'customerList') {
this.$store.dispatch('common/setCount')
}
next()
}
//新增页面
beforeRouteLeave (toRoute, fromRoute, next) {
this.$store.dispatch('common/setCount')
next()
}
问题:因为新增页面添加之后会跳转到详情页之中,再点击详情页的返回,相当于同时触发了两次count那么list之中就会重置两次标题,运行时会出现,保存成功之后直接执行详情页中的标题设置,然后再执行列表中的标题设置,导致详情页显示的是列表页的标题。
2.利用eventHub
main.js
//main.js
beforeRouteLeave (toRoute, fromRoute, next) {
// this.$store.dispatch('common/setCount')
let addbutton
addbutton++
this.$root.eventHub.$emit('addButton', addbutton)
next()
}
//详情页
beforeRouteLeave (toRoute, fromRoute, next) {
if (toRoute.name === 'customerList') {
let addbutton
addbutton++
this.$root.eventHub.$emit('addButton', addbutton)
next()
}
//列表页接收
this.$root.eventHub.$on('addButton', (addButton) => {
dd.ready(() => {
// 获取动态标题
this.$store.dispatch({
type: 'dingtalk/setViewTitle',
title: this.moduleTitle // 显示为当前的模块名称
})
this.moduleTitle = localStorage.getItem('moduleTitle')
this.onInsert()
})
})
以上为完全测试,大致行的通,不知道会不会有小问题
image.png3.利用keepAlive和activated搭档即可
image.png
总算问题解决了!!!周末愉快
网友评论