vue.js - pagina - Tenemos router.reload con vue-router

vue router redirect

Question

Veo en esta solicitud de extracción :

• Añadir un router.reload()

  Volver a cargar con la ruta actual y volver a llamar a los datos

Pero cuando intento emitir el siguiente comando desde un componente de Vue:

this.$router.reload()

Me sale este error:

Uncaught TypeError: this.$router.reload is not a function

Busqué en los docs , pero no pude encontrar nada relevante. ¿El proveedor vue / vue-router tiene alguna funcionalidad como esta?

Las versiones de software que me interesan son:

"vue": "^2.1.0",
"vue-router": "^2.0.3",

PD. Sé que location.reload() es una de las alternativas, pero estoy buscando una opción nativa de Vue.

Answer 1

La solución más sencilla es agregar un atributo de clave a:

<router-view :key="$route.fullPath"></router-view>

Esto se debe a que Vue Router no nota ningún cambio si se está tratando el mismo componente. Con la clave, cualquier cambio en la ruta activará una recarga del componente con los nuevos datos.

Answer 2

Reviso el repositorio de vue-router en GitHub y parece que ya no hay un método reload() . Pero en el mismo archivo hay: objeto currentRoute .

Fuente: vue-router/src/index.js
Docs: docs

get currentRoute (): ?Route {
    return this.history && this.history.current
  }

Ahora puede usar this.$router.go(this.$router.currentRoute) para volver a cargar la ruta actual.

example simple.

Versión para esta respuesta:

"vue": "^2.1.0",
"vue-router": "^2.1.1"

Answer 3

this.$router.go() hace exactamente esto; Si no se especifican argumentos, el enrutador navega a la ubicación actual, actualizando la página.

En cuanto a ''por qué es así'': go pasa sus argumentos window.history.go a window.history.go , por lo que es igual a windows.history.go() - que, a su vez, vuelve a cargar la página, según el documento MDN .

_{nota: ya que esto ejecuta una recarga "suave" en Firefox de escritorio (no portátil), pueden aparecer un montón de peculiaridades extrañas si lo usa, pero en realidad necesita una recarga verdadera; usando el window.location.reload(true); ( https://developer.mozilla.org/en-US/docs/Web/API/Location/reload ) mencionado por OP en su lugar puede ayudar, ciertamente resolvió mis problemas en FF.}

Answer 4

function removeHash () { 
    history.pushState("", document.title, window.location.pathname
                                          + window.location.search);
}


App.$router.replace({name:"my-route", hash: ''#update''})
App.$router.replace({name:"my-route", hash: '' '', params: {a: 100} })
setTimeout(removeHash, 0)

Notas:

1. Y el # debe tener algún valor después de él.
2. El hash de la segunda ruta es un espacio, no una cadena vacía.
3. setTimeout , no $nextTick para mantener la URL limpia.