RosettaJS: Comparativas de Vue, React y Angular

Routing

Navigating Between Routes

In a single-page application (SPA), navigating between routes lets users change views without reloading the full page.

Example

Adding a link to the application's contact page.

VueRouterLink

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

It uses vue-router's RouterLink component to navigate to an internal route. Vue-router is the official router and is installed as a separate Vue dependency.

ReactLink

import { Link } from 'react-router'

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

It uses react-router's Link component to navigate without reloading the application. React-router is a routing library installed separately from 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 {}

It uses the routerLink directive on a native anchor to navigate to an internal route. It belongs to the official @angular/router package.