最近再写一个活动模块,用 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
            }
        },
    }