Programmatic Navigation in Vue.js 3

Using Vue Router's programmatic API to navigate between pages without anchor tags, by pushing, replacing, or going back in history programmatically.

import { createRouter, createWebHistory } from 'vue-router';

// Define some routes
// Each route should map to a component
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  // ...other routes
];

// Create the router instance
const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

This is the setup for the Vue Router. It includes importing the necessary functions from 'vue-router', defining the routes, and creating the router instance with a history mode and the defined routes.

// In a Vue component
export default {
  methods: {
    // the navigation function
    navigateToAbout() {
      // Use the router.push method to navigate to the about page
      this.$router.push('/about');
    },
    replaceWithHome() {
      // Use the router.replace method to navigate to home without adding a history record
      this.$router.replace('/');
    },
    goBack() {
      // Use the router.go method to go one step back in the browser history
      this.$router.go(-1);
    }
  }
};

These are methods inside a Vue component that use Vue Router's programmatic navigation API. The 'navigateToAbout' method uses 'push' to navigate to the about page and add a record in history. The 'replaceWithHome' method uses 'replace' to navigate to the home page without adding a history record. The 'goBack' method uses 'go' to go one step back in the browser history.