¿Tenemos router.reload en vue-router?

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.

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.}

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.

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"

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

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')

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"/>

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.

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

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

vueObject.$forceUpdate();

¿Por qué no usas el método forceUpdate?

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.

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>