Enrutamiento de Vue3 (Vue Router)

En este capítulo presentaremos el enrutamiento de Vue.

El enrutamiento de Vue nos permite acceder a diferentes contenidos mediante diferentes URL.

Con Vue se pueden implementar aplicaciones web de una sola página (single page web application, SPA) con múltiples vistas.

El enrutamiento de Vue.js necesita cargarla biblioteca vue-router

Dirección de la documentación en chino:Documentación de vue-router。

Vue Router se encarga de mapear las rutas URL con los componentes de la aplicación. Cuando el usuario navega por la aplicación, la URL se actualiza pero la página no se recarga, proporcionando así una experiencia de usuario fluida.

La imagen anterior muestra unaestructura de rutas anidadas de dos niveles：

  • El nivel superior (App.vuede<router-view>)se encarga de renderizarel diseño independiente(comoLogin.vue) oel diseño del marco principal（Layout.vue）。
  • El diseño del marco principal (Layout.vue)contiene internamente un segundo<router-view>, que se utiliza para renderizarlos subcomponentes de las páginas funcionales(comoDashboard.vue、User.vue), logrando así la visualización persistente del encabezado, la barra lateral y el pie de página.
  • Las rutas no coincidentes finalmente se dirigen a un componente independientepage404.vue。

Componentes principales

Componentes Descripción Acceso con Options API Acceso con Composition API
routerInstancia La instancia de todo el sistema de enrutamiento, utilizada para la navegación global, agregar rutas, etc. this.$router useRouter()
routeObjeto El objeto de estado de la ruta activa actual, que contiene la URL actual, parámetros, consultas, etc. this.$route useRoute()
<router-link> Componente utilizado para navegar dentro de la aplicación, que se renderiza como una<a>etiqueta, pero puede evitar la recarga predeterminada de la página. - -
<router-view> El componente coincidente con la ruta se renderizará en esta posición. - -

Instalación

Instalación con npm

npm install vue-router

npm (espejo en China)

Se recomienda usar el espejo de Taobao:

npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install vue-router@4

Descarga directa / CDN

https://unpkg.com/vue-router@4

Aplicación básica

1. Crear la tabla de rutas

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

export default createRouter({
  history: createWebHistory(),
  routes
})

2. Montar en la aplicación

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

3. Salida de página

<router-view></router-view>

4. Navegación

<router-link to="/about">About</router-link>

5. Rutas dinámicas

{ path: '/user/:id', component: User }

Al acceder a /user/10, $route.params.id === '10'.

6. Carga diferida (lazy loading)

const About = () => import('../views/About.vue')

7. Guardias de navegación (autenticación)

router.beforeEach((to, from, next) => {
  next()
})

8. Redirección

{ path: '/old', redirect: '/' }

9、404

{ path: '/:pathMatch(.*)*', component: NotFound }

Ejemplo simple

Vue.js + vue-router puede implementar fácilmente aplicaciones de una sola página.

<router-link>Es un componente que se utiliza para establecer un enlace de navegación y cambiar entre diferentes contenidos HTML.toLa propiedad `to` es la dirección de destino, y `<router-view>` es el contenido que se mostrará.

En el siguiente ejemplo agregamos vue-router, luego configuramos los componentes y el mapeo de rutas, y le decimos a vue-router dónde renderizarlos. El código se muestra a continuación:

Código HTML

<div id="app"> <h1>Hello App!</h1> <p> <!--Utilice el componente router-link para navegar--> <!--Especifique el enlace pasando `to`--> <!--`<router-link>` presentará una etiqueta `<a>` con el atributo `href` correcto--> <router-link to="/">Go to Home</router-link> <router-link to="/about">Go to About</router-link> </p> <!--Salida de rutas--> <!--El componente coincidente con la ruta se renderizará aquí--> <router-view></router-view> </div>

router-link

Tenga en cuenta que no usamos una etiqueta `<a>` normal, sino un componente personalizado `router-link` para crear enlaces. Esto permite que Vue Router cambie la URL sin recargar la página, maneje la generación de URL y la codificación. Más adelante veremos cómo beneficiarnos de estas funciones.

router-view

router-view mostrará el componente correspondiente a la URL. Puede colocarlo en cualquier lugar para adaptarse a su diseño.

Código JavaScript

//1. Definir los componentes de ruta. //También se pueden importar desde otros archivos. const Home = { template: '<div>Home</div>' } const About = { template: '<div>About</div>' } //2. Definir algunas rutas. //Cada ruta necesita ser mapeada a un componente. //Discutiremos las rutas anidadas más adelante. const routes = [ { path: '/', component: Home }, { path: '/about', component: About }, ] //3. Crear una instancia de enrutador y pasar la configuración `routes`. //Puedes introducir más configuraciones aquí, pero por ahora //lo mantenemos simple. const router = VueRouter.createRouter({ //4. Internamente se proporciona una implementación del modo history. Para simplificar, aquí usamos el modo hash. history: VueRouter.createWebHashHistory(), routes, //Abreviatura de `routes: routes` }) //5. Crear y montar la instancia raíz. const app = Vue.createApp({}) //Asegúrate de _usar_ la instancia del enrutador para que //toda la aplicación soporte enrutamiento. app.use(router) app.mount('#app') //¡Ahora, la aplicación ha sido iniciada!

Pruébalo »

Los enlaces de navegación en los que se ha hecho clic recibirán un estilo.class ="router-link-exact-active router-link-active"。

Ejemplo de aplicación

El siguiente ejemplo cubre losdefinición,、creación,、montaje,、navegación,yrenderizado,cinco pasos principales.

1. main.js (archivo de entrada)

Ejemplo

import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // Importar la instancia de ruta configurada

// 1. Crear la instancia de la aplicación Vue
const app = createApp(App);

// 2. Montar el enrutador
app.use(router);

// 3. Montar en el DOM
app.mount('#app');

2. router/index.js (configuración de rutas)

Ejemplo

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

// Importar componentes de ruta (aquí se usa importación síncrona para simplificar el ejemplo)
const Home = { template: '<h2>Home Page</h2><p>Welcome to the application home!</p>' };
const About = { template: '<h2>About Us</h2><p>Learn more about this project.</p>' };

// Definir el arreglo de registros de rutas
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  // Coincidencia 404 (colocar al final)
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: { template: '<div>404 Not Found</div>' }
  }
];

// Crear la instancia de Router
const router = createRouter({
  // Usar el modo HTML5 History (recomendado)
  history: createWebHistory(),
  routes, // Configuración de rutas
});

export default router;

3. App.vue (componente raíz)

Ejemplo

<template>
  <div>
    <h1>Ejemplo de Vue Router</h1>
   
    <nav>
      <router-link to="/" active-class="active-link">Home</router-link> |
      <router-link to="/about" active-class="active-link">About</router-link> |
      <router-link to="/nonexistent">404 Demo</router-link>
    </nav>
   
    <hr>
   
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>

<style>
/* Estilo de activación simple */
.active-link {
  font-weight: bold;
color: #427EB9; /* verde de Vue */
}
/* Ajustar el espaciado entre enlaces */
nav a {
  margin: 0 5px;
  text-decoration: none;
}
</style>

Cuando ejecute esta aplicación:

  • Haga clicHomeen el enlace, la URL cambia a/，<router-view>se muestraHome Pageel contenido del componente.
  • Haga clicAbouten el enlace, la URL cambia a/about，<router-view>se muestraAbout Usel contenido del componente.
  • Haga clic404 Demoen el enlace, la URL cambia a/nonexistent，<router-view>se muestra404 Not Foundel contenido del componente.

Atributos relacionados con <router-link>

A continuación, podemos conocer más sobre los atributos de <router-link>.

to

Representa el enlace de la ruta de destino. Cuando se hace clic, internamente pasa inmediatamente el valor de `to` a router.push(), por lo que este valor puede ser una cadena o un objeto que describe la ubicación de destino.

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home.html">Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>

<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

replace

Si se establece el atributo `replace`, al hacer clic se llamará a `router.replace()` en lugar de `router.push()`, y después de la navegación no se dejará un registro en el historial.

<router-link :to="{ path: '/abc'}" replace></router-link>

append

Al establecer el atributo `append`, se añade su ruta delante de la ruta (relativa) actual. Por ejemplo, si navegamos desde `/a` a una ruta relativa `b`, sin configurar `append`, la ruta será `/b`; si está configurado, será `/a/b`.

<router-link :to="{ path: 'relative/path'}" append></router-link>

tag

A veces se quiere<router-link>renderizar como cierta etiqueta, por ejemplo<li>.tagLa prop especifica qué tipo de etiqueta, y de todos modos seguirá escuchando el clic para activar la navegación.

<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>

active-class

Establece el nombre de clase CSS que se usa cuando el enlace está activo. Se puede reemplazar con el siguiente código.

<style>
   ._active{
      background-color : red;
   }
</style>
<p>
   <router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

Nótese que aquíclassse usaactive-class="_active"。

exact-active-class

Configura la clase que debe activarse cuando el enlace coincide exactamente. Se puede reemplazar con el siguiente código.

<p>
   <router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

event

Declara los eventos que se pueden usar para activar la navegación. Puede ser una cadena o un array de cadenas.

<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>

El código anterior establece `event` como `mouseover`, y cuando el mouse se mueve sobre Router Link 1, el contenido HTML de la navegación cambiará.

Manual de la API principal de Vue Router (v4, Vue 3)

1.createRouterOpciones de configuración

Opciones de configuración Uso Ejemplo
history Especificar el patrón de URL createWebHistory()
routes Array de definición de la tabla de rutas [{ path: '/', component: Home }]
scrollBehavior Controlar la posición de desplazamiento de la página { top: 0 }
strict Si se distingue estrictamente la barra diagonal final true
linkActiveClass Clase cuando el enlace está activo 'active'
linkExactActiveClass Clase cuando el enlace coincide exactamente 'exact-active'
parseQuery Análisis personalizado de la query de URL (q) => ({...})
stringifyQuery Serialización personalizada de la query de URL (obj) => 'a=1'

2. Fábrica de History

API Uso Ejemplo
createWebHistory() Usar el modo History de HTML5 (recomendado) createWebHistory()
createWebHashHistory() Usar el modo Hash (la URL lleva#） createWebHashHistory()
createMemoryHistory() Adecuado para SSR (renderizado del lado del servidor) createMemoryHistory()

3.RouteRecord(Entrada de la tabla de rutas)

Campo Uso Ejemplo
path Definición de la ruta del router /user/:id
name Nombre de la ruta name: 'User'
component Componente principal correspondiente UserView
components Para vistas con nombre (múltiples<router-view>) { default: A, left: B }
redirect Destino de redirección redirect: '/login'
children Definir rutas hijas anidadas [ { path: 'profile' } ]
props va aparamsConvertir automáticamente en componenteprops props: true
meta Campo de metainformación personalizado { auth: true }
alias Agregar alias a la ruta actual (múltiples entradas) alias: '/b'
beforeEnter Guardia de navegación exclusiva de la ruta { beforeEnter: (to,from,next)=>{} }

4. Navegación con Router (métodos de la instancia Router)

Router API Uso Ejemplo
router.push(to) Navegación programática, agrega un nuevo registro a la pila de history router.push('/a')
router.replace(to) Navegación programática, reemplaza el registro de history actual router.replace('/a')
router.back() Retroceder un paso router.back()
router.forward() Avanzar un paso router.forward()
router.go(n) Desplazar manualmente la pila de history router.go(-1)
router.addRoute(route) Agregar registros de rutas dinámicamente router.addRoute({ name:'Post', ... })
router.removeRoute(name) Eliminar registros de rutas por nombre router.removeRoute('user')
router.getRoutes() Obtener todos los registros de rutas router.getRoutes()
router.hasRoute(name) Determinar si existe una ruta con el nombre especificado router.hasRoute('user')

5. Guardias de navegación

Guardia Ámbito Firma del hook
router.beforeEach Antes global (to, from, next) => {}
router.beforeResolve Fase de resolución global (después de las guardias dentro de los componentes y de la resolución de componentes asíncronos) (to, from, next) => {}
router.afterEach Después global (no puede impedir la navegación) (to, from, failure) => {}
beforeEnter Exclusivo de la ruta beforeEnter: (to, from, next) => {}
beforeRouteEnter Dentro del componente (no se puede acceder athis) beforeRouteEnter(to, from, next) {}
beforeRouteUpdate Dentro del componente (cuando la ruta actual se reutiliza, por ejemplo, al cambiar los parámetros) beforeRouteUpdate(to, from, next) {}
beforeRouteLeave Dentro del componente (al salir de ese componente) beforeRouteLeave(to, from, next) {}

6.<router-link>Propiedades

Propiedad Uso Ejemplo
to Dirección de ruta de destino to="/a"o:to="{ name: 'user', params: { id: 1 } }"
replace Se utiliza al navegarrouter.replace() <router-link replace>
custom Renderizado personalizado, combinado con slots <router-link custom v-slot="{ href }">
active-class Clase que se aplica cuando el enlace está activo 'active'
exact-active-class Clase que se aplica cuando el enlace coincide exactamente 'exact'

7.<router-view>Propiedades

Propiedad Uso Ejemplo
name Para el renderizado de múltiples vistas (vistas con nombre) <router-view name="left">
route (Avanzado) Forzar el objeto de ruta a renderizar <router-view :route="someRoute">

8.Route(Objeto de ruta actual)

Este objeto, a través deuseRoute()othis.$routese obtiene.

Campo Tipo Significado Ejemplo
params object Parámetros de ruta dinámicos route.params.id
query object Parámetros de query de URL route.query.q
hash string Valor hash en la URL (con#) route.hash
fullPath string Ruta completa resuelta (incluye query y hash) /user/1?x=1
name string Nombre de la ruta actual 'User'
path string Ruta actual (sin query ni hash) /user/1
meta object En la configuración de la ruta,metainformación route.meta.auth
matched RouteRecord[] Todos los registros coincidentes de la ruta (para rutas anidadas) route.matched

9. Composition API (API de composición)

API Uso Ejemplo
useRoute() Obtener el objeto de ruta actual (Route) const route = useRoute()
useRouter() Obtener la instancia del router (Router) const router = useRouter()

10. Navegación programática (ejemplo completo)

Uso Ejemplo Notas
Navegación por nombre de ruta router.push({ name:'User', params:{ id:10 } }) Método recomendado, no depende del orden de las rutas
Navegación con parámetros de query router.push({ path:'/search', query:{ q:'x' } }) Ruta + parámetros de query
Push/Replace que se puede esperar await router.push('/a') La navegación es asíncrona, se puede esperar a que se complete
Navegación con objeto URL router.push({ path: '/foo', hash: '#bar' }) Control completo de los detalles de la URL
Otras extensiones