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 es to the end it should exit.

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 es to the end it should exit.

• javascript
• vue.js

• 4 The router does not store history. It's a router, ie it takes an ining URI and routes the request appropriately. I suggest reading this ~ developer.mozilla/en-US/docs/Web/API/History_API – Phil Commented May 1, 2017 at 5:55

2 Answers 2

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.mit('pop')
            context.mit('push', route)
            return false
        }
        // Going back
        else if (history.length > 1 && history[history.length - 2].name === route.name) {
            context.mit('pop')
            return false
        }
        else {
            context.mit('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 ponent:

/** app.vue */

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

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

    // Analytics
    analytics.trackPageView()
}

Your question is a little unclear in regards to "As long as the app can go back to a previous page" - by previous do you mean any page in the browser's history or a page in your application?

If it's the first, you could simply do:

history.back();
app.exitProcess();

So your script can only reach the exitProcess if the browser couldn't go back in history.

You could also look up document.referrer, but it's often times an empty or undefined value.

However, if it's the second option, then I feel you should keep a history state to know when is the last 'back' action performed inside your app and when it would go over aka go back to a different site.