Explica el \ enrutador y \ ruta en vue
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
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
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.
Pero en este momento no hemos configurado la interfaz de usuario, vamos a renderizarla
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
consulta
Formato de configuración de enrutamiento: configuración normal
enrutador / index.js
Ver aplicaciónEscribir en el método js
Profile.vueObtener el objeto pasado y renderizar