VueJS - Programmatic Navigation

Navigating Programmatically in Vue Router

Vue Router allows you to navigate programmatically using JavaScript. This guide covers the basics of programmatic navigation, including how to use the router.push, router.replace, and router.go methods.

Using router.push

The router.push method is used to navigate to a new route. It adds a new entry to the history stack:

// Navigate using a path
this.$router.push('/about');

// Navigate using a route object
this.$router.push({ path: '/about' });

// Navigate using named routes
this.$router.push({ name: 'about' });

// Navigate with query parameters
this.$router.push({ path: '/about', query: { plan: 'premium' } });
                

Using router.replace

The router.replace method navigates to a new route without adding a new entry to the history stack. This is useful for navigation actions that should not be recorded in the browser history:

// Replace using a path
this.$router.replace('/about');

// Replace using a route object
this.$router.replace({ path: '/about' });

// Replace using named routes
this.$router.replace({ name: 'about' });

// Replace with query parameters
this.$router.replace({ path: '/about', query: { plan: 'premium' } });
                

Using router.go

The router.go method allows you to move forward or backward through the history stack:

// Go forward one step
this.$router.go(1);

// Go backward one step
this.$router.go(-1);

// Go forward two steps
this.$router.go(2);

// Go backward two steps
this.$router.go(-2);
                

Example: Programmatic Navigation

Here is a complete example demonstrating the use of programmatic navigation in a Vue component:

Handling Navigation Failures

When using programmatic navigation, it is important to handle potential navigation failures. You can do this by using a callback or a promise:

// Using a callback
this.$router.push('/about', () => {
  console.log('Navigation succeeded');
}, (err) => {
  console.error('Navigation failed', err);
});

// Using a promise
this.$router.push('/about')
  .then(() => {
    console.log('Navigation succeeded');
  })
  .catch((err) => {
    console.error('Navigation failed', err);
  });
                

Best Practices

Follow these best practices when using programmatic navigation:

• Use Named Routes: Use named routes for navigation to make your code more readable and maintainable.
• Handle Navigation Failures: Always handle potential navigation failures to provide a better user experience.
• Use replace for Non-History Navigation: Use the replace method for actions that should not be recorded in the browser history.
• Document Navigation Logic: Document the purpose and logic of programmatic navigation to improve code readability and maintainability.

Summary

This guide provided an overview of programmatic navigation in VueJS, including how to use the router.push, router.replace, and router.go methods. By understanding and utilizing these techniques, you can control route changes dynamically and improve the navigation experience in your VueJS application.