Explica el \ enrutador y \ ruta en vue

Explica el \ enrutador y \ ruta en vue




Inserte la descripción de la imagen aquí

this. $ router.push ('/ path /') es
solo uno de los atributos para el push de enrutamiento de salto , así que no los presentaré uno por uno aquí.

this. $ route puede obtener los parámetros que pasamos y la consulta de
parámetros de id de ruta dinámica



Primero podemos entender la relación entre los dos como:

Enrutador son todas las rutas que configuramos actualmente, y la ruta es una de las rutas que está activa

este. $ enrutador

  • Durante el proceso de configuración, todas las rutas se almacenan en el objeto del enrutador.
  • Al pasar this.$router.push('/路径/'), podemos hacer un salto de ruta y agregar esta ruta a la pila de historial
  • El objeto de enrutador aquí es esencialmente una instancia de VueRouter

Inserte la descripción de la imagen aquí



esta. $ ruta

El entendimiento popular es qué ruta está actualmente activa y qué ruta se toma

Manera de pasar parámetros

Cuando hacemos un salto de ruta, es posible que queramos pasar algunos parámetros. Los funcionarios de Vue también dan dos formas

  • params
  • consulta


params

Primero que nada, necesitamos tener claro un concepto, cuál es su esencia, aquí te presentamos un concepto: enrutamiento dinámico

Generalmente escribimos una ruta para un componente, pero cuando tratamos con la interfaz de usuario, la ruta a menudo es incierta, por lo que esperamos que la ruta de la ruta se pueda cambiar dinámicamente, como la siguiente ruta: una gran cantidad de ID de usuario están detrás

/user/mary

/user/kris

Implementémoslo, en lugar de <router-link </ router-link en vue

Estamos bajo el archivo del enrutadorindex.jsConfigurar primero

Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí

Después de la configuración, tenemos que irAPP.viewEscribe un método para pasar parámetros en

A través del método de empalmar cadenas, hacemos clic en el botón de usuario, ejecutamos el método btnUser y saltamos a la interfaz de usuario.

Inserte la descripción de la imagen aquí

Pero en este momento no hemos configurado la interfaz de usuario, vamos a renderizarla

Inserte la descripción de la imagen aquí

Se usará aquí this.$route, la ruta de la interfaz de usuario es actualmente la ruta más activa (en uso), podemos obtener el parámetro userId

Inserte la descripción de la imagen aquí



consulta

Formato de configuración de enrutamiento: configuración normal

enrutador / index.js

Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí

Ver aplicaciónEscribir en el método js

Inserte la descripción de la imagen aquí

Profile.vueObtener el objeto pasado y renderizar

Inserte la descripción de la imagen aquí

Inserte la descripción de la imagen aquí

Supongo que te gusta

Origin blog.csdn.net/weixin_46242909/article/details/113059077
Recomendado
Clasificación