Texto y código para comprender la diferencia entre $ route y $ router en vue

1. diferencia

  • $ router es una instancia de VueRouter. Si desea navegar a una URL diferente, use el método $ router.push
  • $ route es el objeto de salto actual del enrutador que puede obtener nombre, ruta, consulta, parámetros, etc.

Mira el ícono:

Inserte la descripción de la imagen aquí
Puedes verlo imprimiendo ambos

  • $ router contiene el atributo de historial, que puede realizar el salto de ruta
  • $ route contiene consulta, atributos de parámetros, los parámetros pasados ​​en la ruta de salto dependen de estos dos

Dos, ejemplo de $ router

Haga clic en Inicio para saltar a / inicio
Inserte la descripción de la imagen aquí

Tres parámetros de transferencia de ruta de $ route example-jump

1. Pase los parámetros en el atributo params de $ route

La siguiente figura se centra en el cuadro rojo.

  • El proceso de pasar userId 'zhangsan' en App.vue a User.vue
  • El flujo de ejecución del código es el mismo.

Inserte la descripción de la imagen aquí
Mostrar efecto url
Inserte la descripción de la imagen aquí
pasar lisi sobre

2. El parámetro pasado en el atributo de consulta en $ router

Centrarse en el cuadro rojo

  • De arriba a abajo está el orden de ejecución del código

Inserte la descripción de la imagen aquí
El efecto de URL visualizado
Inserte la descripción de la imagen aquí
pasa el nombre sobre

3. La diferencia entre los parámetros pasados ​​por los parámetros y los atributos de consulta

Tipos de params

  • Configure el formato de enrutamiento: / user /: id
  • Método de entrega: siga el valor correspondiente después de la ruta
  • La ruta formada después de la transmisión: / user / 123, / user / abc

tipo de consulta

  • Configurar formato de enrutamiento: / usuario, configuración común
  • Método de entrega: la clave de consulta se utiliza como método de entrega en el objeto
  • La ruta formada después de la transmisión: / user? Id = 123, / user? Id = abc

4. Nota

Ruta en / después de url, y consulta después?

  • formato url: protocolo: // host: puerto / ruta? consulta (consulta)
  • Formato en inglés: esquema: // host: puerto / ruta? Consulta # fregment
229 artículos originales publicados · elogiados 113 · 100,000+ vistas

Supongo que te gusta

Origin blog.csdn.net/shang_0122/article/details/105699705
Recomendado
Clasificación