RosettaJS: Comparativas de Vue, React y Angular

Rutas

Navegación entre Rutas

En una aplicación de página única (SPA), la navegación entre rutas permite cambiar de vista sin recargar la página completa.

Ejemplo

Añadir un enlace a la sección de contacto de la aplicación.

VueRouterLink

<template>
  <RouterLink to="/contact">Contact</RouterLink>
</template>

Usa el componente RouterLink de vue-router para navegar a una ruta interna. Vue-router es el router oficial y se instala como dependencia separada de Vue.

ReactLink

import { Link } from 'react-router'

function ContactLink() {
  return <Link to="/contact">Contact</Link>
}

Usa el componente Link de react-router para navegar sin recargar la aplicación. React-router es una librería de enrutado que se instala separadamente de React.

AngularrouterLink

import { Component } from '@angular/core'
import { RouterLink } from '@angular/router'

@Component({
  selector: 'app-contact-link',
  standalone: true,
  imports: [RouterLink],
  template: `<a routerLink="/contact">Contact</a>`,
})
export class ContactLinkComponent {}

Usa la directiva routerLink sobre un elemento <a> para navegar a una ruta interna. Pertenece al paquete oficial @angular/router.