¿Tenemos router.reload en vue-router?


94

Veo en esta solicitud de extracción :

  • Agrega un router.reload()

    Recargue con la ruta actual y vuelva a llamar al gancho de 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 documentos , pero no pude encontrar nada relevante. ¿El proveedor de 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.

Respuestas:


138

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

nota: la implementación actual del enrutador y sus componentes de historial no marcan el parámetro como opcional, pero IMVHO es un error o una omisión por parte de Evan You, ya que la especificación lo permite explícitamente . He presentado un informe de problemas al respecto. Si está realmente preocupado por las anotaciones de TS actuales, use el equivalentethis.$router.go(0)

En cuanto a 'por qué es así': gopasa internamente sus argumentos 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 MDN doc .

nota: dado que esto ejecuta una recarga "suave" en Firefox de escritorio normal (no portátil), pueden aparecer un montón de extrañas peculiaridades si lo usas, pero de hecho necesitas una verdadera recarga; usar el window.location.reload(true);( https://developer.mozilla.org/en-US/docs/Web/API/Location/reload ) mencionado por OP puede ayudar; ciertamente resolvió mis problemas en FF.


4
Sí, está haciendo una actualización de página y no una recarga de componente.
EscapeNetscape

<span @click = "() => {this. $ router.go ()}" class = "btn btn-lg btn-danger">
Vsevolod Azovsky

6
Tenga en cuenta que $router.go()acepta un parámetro, por lo que debe usarlo como $router.go(0), es decir, navegar por cero páginas en el historial
Dan

1
@Dan FWIW, diría que tanto github.com/vuejs/vue-router/blob/dev/src/index.js#L175 como sus implementaciones (por ejemplo, github.com/vuejs/vue-router/blob/ dev / src / history / html5.js # L40 ) no marque el parámetro como opcional, es un error u omisión por parte de Evan You, ya que la especificación lo permite explícitamente (consulte developer.mozilla.org/en-US/ docs / Web / API / History / go # Parámetros ). Sin embargo, he presentado un informe de error al respecto @ github.com/vuejs/vue-router/issues/3065 .

window.location.reload(forceReload)parece estar en desuso, pero window.location.reload()está bien.
henon

42

La solución más simple es agregar un atributo: key a:

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

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


1
vuejs.org/v2/api/#key en los documentos oficiales explica indirectamente el mecanismo del atributo especial clave en vue.
Ian Pinto

1
Esto no funcionará, porque en el escenario que el OP está discutiendo, la ruta completa no cambiará.
Nick Coad

26
this.$router.go(this.$router.currentRoute)

Documentos de Vue-Router:

Revisé el repositorio de vue-router en GitHub y parece que ya no hay reload()método. Pero en el mismo archivo, hay: currentRouteobjeto.

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

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

Ahora puede utilizar this.$router.go(this.$router.currentRoute)para recargar la ruta actual.

Ejemplo sencillo .

Versión para esta respuesta:

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

1
Esto no actualizará ningún dato elSafari
jilen

7
¿Hay alguna forma de recargar el componente sin actualizar la página? La ruta debería ser la misma, digamos '/ usuarios'. Pero cuando hago clic en el botón Actualizar, tiene que actualizar toda la página, sin volver a cargar la página.
Rajeshwar

6

Úselo router.go(0)si usa TypeScript y solicita argumentos para el método go.


4

router.js

routes: [
{
  path: '/',
  component: test,
  meta: {
    reload: true,
  },
}]

main.js

import router from './router';

new Vue({
  render: h => h(App),
  router,
  watch:{
    '$route' (to) {
       if(to.currentRoute.meta.reload==true){window.location.reload()}
   }
 }).$mount('#app')

2

Es mi recarga. Debido a un navegador muy extraño. location.reloadno se puede recargar.

methods:{
   reload: function(){
      this.isRouterAlive = false
      setTimeout(()=>{
         this.isRouterAlive = true
      },0)
   }
}
<router-view v-if="isRouterAlive"/>

1

Resuelva la ruta a una URL y navegue por la ventana con Javascript.

        let r = this.$router.resolve({
        name: this.$route.name, // put your route information in
        params: this.$route.params, // put your route information in
        query: this.$route.query // put your route information in
      });
      window.location.assign(r.href)

Este método reemplaza la URL y hace que la página realice una solicitud completa (actualización) en lugar de depender de Vue.router. $ router.go no funciona igual para mí, aunque teóricamente se supone que lo haga.


1
`<router-link :to='`/products`' @click.native="$router.go()" class="sub-link"></router-link>`

He intentado esto para volver a cargar la página actual.



-1
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 #debe tener algún valor después de eso.
  2. El segundo hash de ruta es un espacio, no una cadena vacía.
  3. setTimeout, no $nextTickpara mantener limpia la URL.

-2

Para volver a renderizar, puede usar en el componente principal

<template>
  <div v-if="renderComponent">content</div>
</template>
<script>
export default {
   data() {
      return {
        renderComponent: true,
      };
    },
    methods: {
      forceRerender() {
        // Remove my-component from the DOM
        this.renderComponent = false;

        this.$nextTick(() => {
          // Add the component back in
          this.renderComponent = true;
        });
      }
    }
}
</script>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.