How can I get the Vue routers history?

Question

I need to detect whether or not the Vue router has any more entries in its history to go back to. I would use this to detect whether or not to trigger the exit app function. As long as the app can go back to a previous page, it should, but when it comes to the end it should exit.

Answer 1

So I had a similar issue, running both an angularjs and vue.js app side by side. Once the vue.js history stack was empty, go to angularjs. Here is my vuex solution I used:

/** store/history.ts */

import { clientRouter } from '@/views'
import { Route } from 'vue-router'
import { ActionTree, GetterTree, Module, MutationTree } from 'vuex'
import { IRootState } from '.'

export interface IHistoryState {
    history: Route[]
}

const historyState: IHistoryState = {
    history: []
}

const getters: GetterTree<IHistoryState, IRootState> = {
    history: state => state.history
}

const mutations: MutationTree<IHistoryState> = {
    pop: state => state.history.pop(),
    push: (state, route: Route) => state.history.push(route)
}

const actions: ActionTree<IHistoryState, IRootState> = {
    back: context => {
        const history = context.state.history
        if (history.length === 1) {
            window.location.href = '/angular.html'
        }
        else {
            clientRouter.back()
        }
    },
    record: (context, route: Route) => {
        const history = context.state.history

        // Reloading same page
        if (history.length && history[history.length - 1].name === route.name) {
            context.commit('pop')
            context.commit('push', route)
            return false
        }
        // Going back
        else if (history.length > 1 && history[history.length - 2].name === route.name) {
            context.commit('pop')
            return false
        }
        else {
            context.commit('push', route)
            return true
        }
    }
}

export default {
    state: historyState,
    getters,
    mutations,
    actions,
    namespaced: true
} as Module<IHistoryState, IRootState>

I'm using clientRouter here because of SSR but you can use whichever router. Also its in typescript, I can convert it to vanilla if requested. With this method you should always go back using the action here. Then all you need is a way to record the history, I used this code on the main app component:

/** app.vue */

@Action('history/record') recordHistory: (to: Route) => forward:boolean

@Watch('$route')
function (to: Route) {
    // Push to history
    this.recordHistory(to)

    // Analytics
    analytics.trackPageView()
}