TOC
最近再写一个活动模块，用 vue 写的。这个活动模块需要融合到我们的主项目之中，这就意味着在用路由做其实不太好，活动本身的数据交换比较频繁，用 vuex 太大材小用，用公共对象事件和 Props 传递的方式又不是很方便，所以决定用动态的组件切换来做这个活动模块，也就是说一个活动对应一个路由中的主组件，其中子页面都利用组件做。那么就需要在微信中模拟一个路由系统，否则就无法做到返回。
// 路由切换 返回拦截 模拟一个路由
export const commonActivityMixin = {
mounted() {
pushHistory()
function pushHistory() {
var state = {
title: 'title',
url: '#' + window.location.href.split('#')[1]
}
window.history.pushState(
state,
'title',
'#' + window.location.href.split('#')[1]
)
}
window.addEventListener('popstate', this.backHandle, false)
},
destroyed() {
window.removeEventListener('popstate', this.backHandle, false)
},
data() {
return {
pageStack: [] // 组件栈
}
},
methods: {
backHandle() {
if (this.pageStack.length > 0) {
let prevComponent = this.pageStack.pop()
this.currentComponent = prevComponent.Com
this.currentComponentName = prevComponent.ComName
}
},
togglePageHandle(page, meta) {
// 使用子组件传递PAGE KEY的方式来切换页面
if (this.componentsMap[page]) {
// 切换组件前先将当前页面加入到栈中
this.pageStack.push({
Com: this.currentComponent,
ComName: this.currentComponentName
})
this.currentComponent = this.componentsMap[page]
this.currentComponentName = page
// 额外信息 用于组件通讯
if (meta) {
this.meta = meta
} else {
this.meta = null
}
},
}