Is there a way to access the history of Vue routers?

Question

Is there a way to access the history of Vue routers?

I am looking for a way to determine if the Vue router has additional entries in its history that can be navigated back to. This information is crucial for deciding whether or not to execute the exit app function. The app should only navigate back to previous pages as long as it is possible, but once it reaches the final page, it should exit.

javascript vue.js

Answer 1

Answer №1

Encountering a similar issue, I had to manage both an angularjs and vue.js app running simultaneously. The approach I took was to switch to the angularjs app once the vue.js history stack was empty. Below is the solution I implemented using vuex:

/** 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>

Utilizing clientRouter due to SSR, but any router can be used. The code is in typescript, but can be converted to vanilla JS upon request. By following this method, navigation should always happen through the designated action here. To keep track of history, I added the following code to 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()
}

Answer 2

Encountering a similar issue, I had to manage both an angularjs and vue.js app running simultaneously. The approach I took was to switch to the angularjs app once the vue.js history stack was empty. Below is the solution I implemented using vuex:

/** 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>

Utilizing clientRouter due to SSR, but any router can be used. The code is in typescript, but can be converted to vanilla JS upon request. By following this method, navigation should always happen through the designated action here. To keep track of history, I added the following code to 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()
}

Answer 3

Answer №2

It seems like there is some confusion in your question regarding the term "As long as the app can go back to a previous page" - are you referring to any page in the browser's history or within your application?

If it's the former, you can achieve this by using:

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

This way, the script will only execute exitProcess if the browser cannot go back in its history.

You may also consider checking out document.referrer, although it might be empty or undefined most of the time.

On the other hand, if you meant the latter scenario, I suggest maintaining a history state to track the last 'back' action within your app and when it would lead to exiting the app and navigating to another site.

Answer 4

It seems like there is some confusion in your question regarding the term "As long as the app can go back to a previous page" - are you referring to any page in the browser's history or within your application?

If it's the former, you can achieve this by using:

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

This way, the script will only execute exitProcess if the browser cannot go back in its history.

You may also consider checking out document.referrer, although it might be empty or undefined most of the time.

On the other hand, if you meant the latter scenario, I suggest maintaining a history state to track the last 'back' action within your app and when it would lead to exiting the app and navigating to another site.

Is there a way to access the history of Vue routers?

Answer №1

Answer №2

Similar questions

What is the best way to address Peer dependency alerts within npm?

Embedding a YouTube video in a view player using HTML5

Create a unique type in Typescript that represents a file name with its corresponding extension

How can we organize and display the data from two linked arrays, one containing player names and the other containing

What is the process for constructing an object to resemble another object?

jquery counter is malfunctioning

Setting a background image as a variable in Vue.js

Create a JavaScript JSON object using a for loop

Steps to activate the Back button when utilizing WebView in Nativescript-Vue

Is there a way to prevent the annoying "Reload site? Changes you made may not be saved" popup from appearing during Python Selenium tests on Chrome?

Employing promises for fetching data via XHR results in a promise that is still pending

What is the process for displaying data submitted through a form on page B to page A using Node and Express?

Node.js variable initialization

JavaScript event in Chrome extension triggers a browser notification and allows for modification using a specific method

Guidelines for cycling through a series of HTTP requests and effectively saving the data from each cycle into an array

After the initial iteration, the .length function ceases to function properly when

Organize information within a single column of a table according to the heading using Angular

Unable to execute the action specified in the store sub-file

Using Angular UI Router to Access $scope Beyond the Scope of the UI View

Saving the index.html file to disk when the button is clicked