Complete Guide to Getting Previous Page URL in Vue Router: From Navigation Guards to History State

Introduction

In modern single-page application development, route management is a crucial component for building smooth user experiences. Vue Router, as the official routing solution in the Vue.js ecosystem, provides rich APIs for handling page navigation and state management. However, in practical development scenarios, developers often need to access the previous page's URL information for implementing features such as back buttons, navigation history, or permission validation. This article systematically introduces technical solutions for obtaining the previous page URL, starting from Vue Router's core mechanisms.

Navigation Guards: The Standard Method for Getting Previous Page

Vue Router's navigation guard system is the core mechanism for handling route transition logic. According to official documentation, all navigation guard functions receive three parameters: to (the target route object), from (the current route object), and next (the resolution function). The from parameter specifically represents the current route that the user is leaving, providing direct access to previous page information.

Within components, the beforeRouteEnter guard can be used to access the from parameter. This guard is called before the component instance is created, so it cannot directly access component data via this. However, the component instance can be manipulated through the callback parameter of the next function:

export default {
  data() {
    return {
      prevRoute: null
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.prevRoute = from
    })
  },
  methods: {
    goBack() {
      if (this.prevRoute) {
        this.$router.push(this.prevRoute.path)
      } else {
        this.$router.go(-1)
      }
    }
  }
}

In this example, the beforeRouteEnter guard captures the from route object and assigns it to the component's prevRoute data property via the next callback. Subsequently, the previous page's URL path can be accessed via this.prevRoute.path. This method not only retrieves the URL but also preserves the complete route object, allowing access to other route information such as params and query.

Variants of Navigation Guards and Application Scenarios

Besides beforeRouteEnter, Vue Router provides other navigation guards to handle different lifecycle stages:

• beforeRouteUpdate: Called when the current route changes but the component is reused
• beforeRouteLeave: Called before leaving the current route

For scenarios requiring recording of the previous page when leaving a route, the beforeRouteLeave guard can be used:

export default {
  data() {
    return {
      nextRoute: null
    }
  },
  beforeRouteLeave(to, from, next) {
    // Save information about the route being navigated to
    this.nextRoute = to
    next()
  },
  mounted() {
    // In the target component, previous page information can be obtained via route state sharing
    if (this.$route.meta.prevRoute) {
      this.prevRoute = this.$route.meta.prevRoute
    }
  }
}

This pattern is suitable for complex application scenarios requiring cross-component route information transfer. Through route meta fields or state management tools (like Vuex), more flexible route state sharing can be achieved.

History State Access in Vue Router 4

For projects using Vue 3 and Vue Router 4, previous page information can also be obtained by accessing the router's history state. Vue Router 4, rebuilt based on Vue 3's reactive system, provides a more direct history record access interface:

import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'NavigationComponent',
  setup() {
    const router = useRouter()
    
    // Access the back path in history state
    const prevPath = router.options.history.state.back
    
    const goToPrevPage = () => {
      if (prevPath) {
        router.push(prevPath)
      } else {
        router.go(-1)
      }
    }
    
    return {
      prevPath,
      goToPrevPage
    }
  }
})

This method directly accesses the browser history record's state information, suitable for simple back navigation scenarios. However, it's important to note that history.state.back may be null or undefined, particularly when users directly enter URLs or refresh pages, thus requiring proper null value handling.

Implementation Principles and Best Practices

Understanding the implementation principles behind Vue Router's previous page URL retrieval helps developers choose the most suitable solution for their projects. The navigation guard mechanism is based on Vue Router's internal route transition process:

1. When route transition begins, Vue Router collects current route information as the from parameter
2. Global guards, per-route guards, and in-component guards are called sequentially
3. In each guard, the from parameter remains as the pre-transition route state
4. Actual route transition occurs only after guard execution completes

This design ensures accurate access to previous page information at various stages of route transition. In practical development, the following best practices are recommended:

1. For most scenarios, prioritize using the from parameter in navigation guards as the most reliable and standard method
2. When route history persistence is needed, consider combining with state management like Vuex or Pinia
3. For simple back functionality, router.go(-1) remains a concise and effective choice
4. Always handle edge cases such as direct access, page refresh, or empty history records

Performance Considerations and Notes

When implementing previous page URL retrieval functionality, the following performance and security considerations should be noted:

• Avoid time-consuming operations in navigation guards to prevent impacting route transition performance
• For sensitive route information, consider appropriate encryption or desensitization
• In server-side rendering (SSR) scenarios, special handling is required for route state serialization and deserialization
• When using TypeScript, complete type declarations can be defined for route objects to improve code reliability

Conclusion

Obtaining the previous page URL is a common requirement in Vue Router applications, and Vue Router provides elegant solutions through its navigation guard mechanism. Through the from parameter in guards like beforeRouteEnter, developers can easily access complete route object information. For Vue Router 4, the back path can also be obtained via the history state interface. Understanding the principles behind these technical solutions, combined with specific application scenarios and best practices, helps developers build more robust and user-friendly single-page applications.