Как смотреть историю для приложения 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

Это то, что я в итоге сделал.

Сначала я создал новое свойство на маршрутизаторе, чтобы я мог установить его, когда пользователь нажимает кнопку «назад» или «вперед»

в моем 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--
    }
}