Implement Programmatic Navigation with Vue Router 4

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/HomeView.vue')
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: () => import('../views/DashboardView.vue'),
    meta: { requiresAuth: true } // Custom meta field for authentication
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/LoginView.vue')
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

// Global Navigation Guard
router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('isAuthenticated'); // Simulate auth check

  if (to.meta.requiresAuth && !isAuthenticated) {
    // If route requires auth and user is not authenticated, redirect to login
    console.log('Redirecting to login: Auth required.');
    next({ name: 'Login' });
  } else if (to.name === 'Login' && isAuthenticated) {
    // If user is authenticated and tries to go to login, redirect to dashboard
    console.log('Already logged in, redirecting to dashboard.');
    next({ name: 'Dashboard' });
  } else {
    // Proceed to the route
    next();
  }
});

export default router;

// views/LoginView.vue (Example component for triggering login)
<template>
  <div>
    <h2>Login</h2>
    <button @click="performLogin">Log In</button>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const performLogin = () => {
  // Simulate successful login
  localStorage.setItem('isAuthenticated', 'true');
  console.log('Logged in successfully!');
  router.push({ name: 'Dashboard' }); // Programmatic navigation to Dashboard
};
</script>

// views/DashboardView.vue (Example protected component)
<template>
  <div>
    <h2>Dashboard</h2>
    <p>Welcome, you are logged in!</p>
    <button @click="performLogout">Log Out</button>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const performLogout = () => {
  localStorage.removeItem('isAuthenticated');
  console.log('Logged out.');
  router.push({ name: 'Home' }); // Programmatic navigation to Home
};
</script>