Routing Navigation and Data Transfer in Vue Router

To programmatically navigate between routes in a Vue application using Vue Router, the this.$router.push() method is the standard approach. It adds a new entry to the browser's history stack, enabling bakcward navigation via the browser’s back button.

1. Invocation Modes

• Declarative: Using <router-link> components — internally triggers push().
• Programmatic: Directly calling this.$router.push(...) from JavaScript logic.

2. Supported Argument Types

The method accepts either a string path or a route location descriptor object:

// String path
this.$router.push('/dashboard');

// Path with encoded query (e.g., for redirect tracking)
this.$router.push(`/auth/login?redirect=${encodeURIComponent(this.$route.fullPath)}`);

// Named route with params (recommended when using dynamic segments)
this.$router.push({
  name: 'UserProfile',
  params: { id: '789', tab: 'settings' }
});

// Route with query parameters (visible in URL)
this.$router.push({
  path: '/reports',
  query: { period: 'monthly', format: 'pdf' }
});

// Conditional navigation based on API response
api.fetchUserStage().then(response => {
  if (response.valid) {
    this.$router.push({ name: 'Dashboard' });
  } else {
    this.$router.push({
      name: 'AuthFlow',
      query: { stage: response.stage, source: 'onboarding' }
    });
  }
});

// Preserving existing query parameters during navigation
const preservedQuery = {
  ...this.$route.query,
  timestamp: Date.now()
};
this.$router.push({
  name: 'ProfileEditor',
  query: preservedQuery
});

3. Parameter Retrieval in Target Components

Parameters passed via push() are accessed through this.$route (not $router) — note the distinction between the router instance ($router) and current route state ($route):

• Query parameters appear in the URL and are accessible via this.$route.query. They support serialization and bookmarking.
• Route params originate from dynamic route definitions (e.g., /user/:id) and are retrieved via this.$route.params. They do not appear in the URL unless explicitly included in the path string.

Important constraint: When using params, avoid mixing path and params in the same navigation object — Vue Router ignores params in such cases. Instead, use name to reference a named route:

// ✅ Correct: named route + params
this.$router.push({
  name: 'ProductDetail',
  params: { sku: 'ABC-123', locale: 'en-US' }
});

// ❌ Incorrect: path + params won’t work
this.$router.push({
  path: '/product',
  params: { sku: 'ABC-123' } // ignored!
});

4. Accessing Values in Destinasion Component

In the target component’s template or script:

<template>
  <div>
    <p>SKU: {{ $route.params.sku }}</p>
    <p>Locale: {{ $route.query.locale || 'default' }}</p>
  </div>
</template>

Or in composition API (Vue 3) with useRoute():

import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    return {
      sku: route.params.sku,
      referrer: route.query.ref
    };
  }
};