Salto de ruta en Vue.js

Enrutamiento en Vue.js

explicación oficial

En Vue.js, el enrutamiento es un concepto importante que se utiliza para la navegación y los saltos de página. Vue proporciona un complemento oficial llamado Vue Router para crear un sistema de enrutamiento para aplicaciones de una sola página (SPA). Vue Router le permite asignar diferentes componentes a diferentes URL en su aplicación, de modo que los usuarios puedan navegar a diferentes vistas mediante los botones de avance y retroceso del navegador o ingresando la URL directamente.

Vue Router proporciona las siguientes características clave:

1. Mapeo de rutas : asigne URL a componentes de Vue para que los usuarios puedan acceder a diferentes páginas o vistas a través de diferentes URL.

2. Enrutamiento anidado : admite enrutamiento anidado; puede anidar múltiples configuraciones de enrutamiento en el enrutamiento principal para crear estructuras de páginas complejas.

3. Parámetros de ruta : admite parámetros de ruta dinámicos, lo que le permite pasar parámetros en rutas para mostrar contenido diferente según diferentes valores de parámetros.

4. Protectores de navegación de ruta : se proporcionan protectores de navegación de ruta, lo que le permite realizar cierta lógica antes y después de los saltos de ruta, como verificar los permisos del usuario o realizar la carga de datos.

Explicación popular

Imagine que está utilizando un navegador de Internet para visitar diferentes páginas web. Cada vez que ingresa una URL o hace clic en un enlace en su navegador, el navegador carga la página correspondiente. Este es el sistema de enrutamiento del navegador en funcionamiento. De manera similar, el sistema de enrutamiento en Vue.js le permite cambiar entre diferentes vistas en una aplicación de una sola página, como navegar a diferentes páginas web en un navegador.

Por ejemplo, digamos que está creando una aplicación de una sola página para una tienda en línea. Puede utilizar Vue Router para definir diferentes páginas, como la página de inicio, la página de lista de productos, la página de detalles del producto, el carrito de compras, etc. Cada página corresponde a un componente de Vue, y Vue Router asigna URL a estos componentes para que los usuarios puedan acceder a diferentes páginas haciendo clic en enlaces o ingresando URL específicas. De esta manera, los usuarios pueden navegar por diferentes secciones sin actualizar toda la página, como si estuvieran navegando en una tienda real.

Cómo implementar el enrutamiento

En Vue.js, puede utilizar Vue Router para implementar el enrutamiento. La siguiente es una introducción detallada y ejemplos sobre Vue Router:

1. Instale el enrutador Vue

Primero, necesitas instalar Vue Router. Puedes instalarlo usando npm o hilo:

npm install vue-router

o

yarn add vue-router

2. Cree una instancia de Vue Router

En su aplicación Vue.js, debe crear una instancia de Vue Router y asociarla con la aplicación. Normalmente, esto se hace en el archivo de punto de entrada de la aplicación.

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
    
    
  routes: [
    // 定义路由规则
    {
    
    
      path: '/',
      component: Home // 与 Home 组件关联
    },
    {
    
    
      path: '/products',
      component: Products // 与 Products 组件关联
    },
    // ...其他路由规则
  ]
})

3. Crear componentes correspondientes al enrutamiento.

En el ejemplo anterior, hemos definido dos reglas de enrutamiento, asociadas con Homecomponente y Productscomponente respectivamente. Ahora necesitas crear estos componentes:

// Home.vue
<template>
  <div>
    <h1>Home Page</h1>
    <!-- Home 页面内容 -->
  </div>
</template>

// Products.vue
<template>
  <div>
    <h1>Products Page</h1>
    <!-- Products 页面内容 -->
  </div>
</template>

4. Utilice enlaces de enrutamiento en plantillas

Para utilizar el enrutamiento en su aplicación, puede usar el elemento en su plantilla <router-link>para crear enlaces para que los usuarios puedan navegar a diferentes páginas. Por ejemplo:

<router-link to="/">Home</router-link>
<router-link to="/products">Products</router-link>

5. Representar la vista de enrutamiento

En el diseño de su aplicación, puede usar <router-view>el elemento para representar el componente correspondiente a la ruta actual. Por ejemplo:

<template>
  <div>
    <h1>My Vue.js App</h1>
    <router-view></router-view>
  </div>
</template>

De esta manera, cuando el usuario hace clic en el enlace, <router-view>el componente que coincide con la ruta actual se representará automáticamente para lograr el efecto de cambio de página.

Este es sólo el uso básico de Vue Router. Además de utilizar los métodos básicos de navegación de ruta proporcionados por Vue Router, existen otros métodos de salto de ruta comunes, aquí hay algunas introducciones y ejemplos:

1. Navegación programática

La navegación programática es una forma de implementar saltos de enrutamiento a través de código JavaScript. Puede utilizar objetos en métodos de componentes de Vue this.$routerpara navegar a diferentes rutas.

Ejemplo: navegación programática en el controlador de eventos de clic de un botón.

<template>
  <div>
    <button @click="navigateToHome">Go to Home</button>
  </div>
</template>

<script>
export default {
      
      
  methods: {
      
      
    navigateToHome() {
      
      
      // 编程式导航到"/"路由
      this.$router.push('/');
    }
  }
}
</script>

2. Rutas con nombre

Vue Router le permite establecer un nombre para sus rutas y navegar por nombre. Esto es útil para navegar a rutas específicas en su aplicación.

Ejemplo: configure una ruta con nombre en la configuración de ruta y use el nombre para navegar.

const router = new VueRouter({
    
    
  routes: [
    {
    
    
      path: '/',
      component: Home,
      name: 'home'
    },
    {
    
    
      path: '/products',
      component: Products,
      name: 'products'
    }
  ]
});

Utilice rutas con nombre para la navegación en componentes:

<template>
  <div>
    <router-link :to="{ name: 'home' }">Go to Home</router-link>
    <router-link :to="{ name: 'products' }">Go to Products</router-link>
  </div>
</template>

3. Redirigir

Los redireccionamientos le permiten redirigir una ruta a otra. Esto es útil cuando necesita dirigir a los usuarios a una página predeterminada o a una página antigua.

Ejemplo: Redirigir la ruta "/" a la ruta "/home".

const router = new VueRouter({
    
    
  routes: [
    {
    
    
      path: '/',
      redirect: '/home'
    },
    {
    
    
      path: '/home',
      component: Home
    }
  ]
});

4. Alias ​​de ruta

Los alias de ruta le permiten establecer múltiples rutas para una ruta para que los usuarios puedan acceder a la misma página a través de diferentes rutas.

Ejemplo: establezca el alias "/welcome" para la ruta "/home".

const router = new VueRouter({
    
    
  routes: [
    {
    
    
      path: '/home',
      component: Home,
      alias: '/welcome'
    }
  ]
});

Vue Router proporciona opciones de navegación flexibles para adaptarse a las diferentes necesidades de navegación. Dependiendo de los requisitos específicos de su aplicación, puede elegir el método de navegación adecuado. Ya sea navegación programática, rutas con nombre, redireccionamientos o alias de ruta, puede ayudarlo a crear aplicaciones Vue.js con una excelente experiencia de navegación. De esta manera, en comparación con el método tradicional html, el enrutamiento no tiene que ir y venir entre varias páginas, lo que dificulta la transmisión de datos. Por supuesto, aquí solo presentamos el uso de enrutamiento. Presentaremos y estudiaremos los parámetros de enrutamiento con más detalle más adelante. ¡Tendré una comprensión más profunda y espero poder brindarle mejores efectos de lectura y acumulación de conocimientos! ! !