vue-reverse/examples/plugins/stack.js

import Vue from 'vue'
import router from '../router'

export default {
  install (vue) {
    const stack = {
      list: {},
      query: {},
    }
    const actions = {}
    const method = {
      create (name, title, query = {}) {
        stack.list[name] = [{ name, title }]
        stack.query[name] = { [name]: query }
        this.emit(name)
      },
      push (name, title = '未命名', query = {}, routeName = router.history.current.name) {
        const currentStackList = stack.list[routeName]
        const currentStackQuery = stack.query[routeName]
        if (!currentStackList) return new Error(`没有找到${routeName}的栈`)
        currentStackList.push({ name, title })
        currentStackQuery[name] = query
        this.emit(routeName)
      },
      replace (name, title, query = {}, routeName = router.history.current.name) {
        this.go(-1, routeName, false)
        this.push(name, title, query)
      },
      go (backward = -1, routeName = router.history.current.name, emit = true) {
        const currentStackList = stack.list[routeName]
        if (!currentStackList) return new Error(`没有找到${routeName}的栈`)
        if (currentStackList.length === 1) return
        currentStackList.length += backward
        if (emit) this.emit(routeName)
      },
      emit (name) {
        Vue.hub.$emit('STACK_CHANGE', {
          list: stack.list[name],
          query: stack.query[name],
        })
        // console.group('Stack Change:')
        // console.log(stack)
        // console.groupEnd('Stack Change:')
      },
      addAction (name, action, payload = {}, option = {}) {
        if (!name || !action) return new Error('栈名和action是必须参数')
        actions[name] = { action, payload, option }
        Vue.hub.$emit('STACK_ACTION', actions)
        // console.group('Stack Action:')
        // console.log(actions)
        // console.groupEnd('Stack Action:')
      },
      getStack () {
        return stack
      },
    }

    vue.prototype.$stack = method
    vue.stack = method
  },
}