如何查看 Electron 和 VueJS 应用程序的历史记录

Question

如果没有转发历史状态，我希望能够使图标保持暗淡。它看起来像 < >，如果您无法在浏览器历史记录中继续前进，那么右边的那个会变暗。

这是我的代码，但它不起作用。

<template>
    <div class="history-container" :class="pinned ? 'pinned' : ''">
       <div class="go-back-button" v-html="arrowLeftSVG" @click="go(-1)"></div>
       <div class="forward-button" v-html="arrowLeftSVG" @click="go(1)" :class="!forwardExists ? 'disabled' : ''"></div>
    </div>
</template>

<script>
export default {  
    computed: {
        forwardExists: () => {
            return window.history.state !== null
        }
    },
    methods: {
        go (num) {
            window.history.go(num)
        }
    }
}
</script>

<style lang="scss">
.history-container {
    display: flex;
    position: relative;
    width: 60px;
    height: 51px;
    z-index: 1;
    &.pinned {
        margin-left: 260px;
    }
}

.forward-button {
    transform: rotate(180deg);
}

.forward-button, .go-back-button {
    width: 50px;
    height: 51px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
}

编辑：这是一个单页应用程序。只是觉得你可能想知道。

Answer 1

这就是我最后做的。

首先我在路由器上新建了一个属性，这样我就可以在用户点击"back"或"forward"按钮时设置它

在我的 router.vue 我有这个

router.beforeEach((to, from, next) => {
  if (router.isNavigating) {
    router.isNavigating = false
  }
  else {
    history.pushState(null, '')
  }
  next()
})

router['isNavigating'] = false
router['direction'] = false

然后在我的模板中有这个。

<div class="go-back-container">
    <div class="go-back-button" v-html="arrowLeftSVG" @click="go(0)"></div>
    <div class="history-text">back</div>
</div>
    <div class="forward-container" :class="$root.forwardEntries !== 0 ? '' : 'dim'" v-show="!isMobile">
    <div class="forward-button" v-html="arrowLeftSVG" @click="go(1)"></div>
    <div class="history-text">forward</div>
</div>

最后，在我的 main.js 安装挂钩中，我有：

var pushState = history.pushState
history.pushState = function (state) {
  // create an onpushstate listener
  pushState.apply(history, arguments)

  if (typeof history.onpushstate === 'function') {
      history.onpushstate({ state: state })
  }
}

window.history.onpushstate = (e) => {
    this.forwardEntries = 0
    // if we are pushing state, then we know that the user 
    // has navigated forward in history
    // so we know that the user can't go forward
}

window.onpopstate = (e) => {
    if (router.direction === 'back') {
        console.log('back')
        this.forwardEntries++
    }
    else if (router.direction === 'forward') {
         console.log('forward')
         this.forwardEntries--
    }
}

如何查看 Electron 和 VueJS 应用程序的历史记录

How to watch history for Electron and VueJS app

javascript

html5-history

vuejs2