Vue Router Configuration

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

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

{
  path: '/',
  name: 'login',
  component: Login
}

this.$router.push('/');
// or
this.$router.push({ name: 'login' });

{
  path: '/home',
  name: 'home',
  component: HomeView
}

this.$router.push('/home');
// or
this.$router.push({ name: 'home' });

{
  path: '/estudiantes_pre_pictures',
  name: 'Estudiantes Pre',
  component: Estudiantes_Pre_FotoViews
}

{
  path: '/estudiantes_pre_registro',
  name: 'Estudiantes Pre R',
  component: Registro_IndvPreEst
}

{
  path: '/estudiantes_pictures',
  name: 'Estudiantes',
  component: Estudiantes_FotoViews
}

{
  path: '/docentes_pictures',
  name: 'Docentes',
  component: Docentes_FotoViews
}

{
  path: '/docentes_registro',
  name: 'DocenteR',
  component: Registro_IndvDoc
}

{
  path: '/estudiantes_registro',
  name: 'EstudianteR',
  component: Registro_IndvEst
}

{
  path: '/about',
  name: 'about',
  component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}

// Navigate to home
this.$router.push('/home');

// Navigate to teachers photos
this.$router.push('/docentes_pictures');

// Navigate back to login
this.$router.push('/');

// Navigate to home
this.$router.push({ name: 'home' });

// Navigate to students photos
this.$router.push({ name: 'Estudiantes' });

// Navigate to login
this.$router.push({ name: 'login' });

<template>
  <router-link to="/home">Go to Home</router-link>
  <router-link :to="{ name: 'Docentes' }">Teachers</router-link>
</template>

router.beforeEach((to, from, next) => {
  // Check if user is authenticated
  const isAuthenticated = store.getters.isAuthenticated;
  
  // Redirect to login if not authenticated and trying to access protected route
  if (to.name !== 'login' && !isAuthenticated) {
    next({ name: 'login' });
  } else {
    next();
  }
});

// Good
this.$router.push({ name: 'home' });

// Acceptable
this.$router.push('/home');

try {
  await this.$router.push({ name: 'home' });
} catch (error) {
  if (error.name !== 'NavigationDuplicated') {
    console.error('Navigation error:', error);
  }
}

// Get current route
const currentRoute = this.$route;

console.log('Current path:', currentRoute.path);
console.log('Current name:', currentRoute.name);

// Check if on specific route
if (this.$route.name === 'home') {
  console.log('User is on home page');
}

// Access route params
const params = this.$route.params;

// Access query parameters
const query = this.$route.query;

// Example: /user/123?tab=profile
console.log(this.$route.params.id);    // '123'
console.log(this.$route.query.tab);     // 'profile'

location / {
  try_files $uri $uri/ /index.html;
}

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

{
  path: '/home',
  name: 'home',
  component: HomeView,
  meta: {
    requiresAuth: true,
    roles: ['sotics', 'atics', 'sa'],
    title: 'Dashboard'
  }
}

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    // Check authentication
  }
  
  if (to.meta.title) {
    document.title = to.meta.title;
  }
  
  next();
});