У нас есть router.reload в vue-router?

Добавить router.reload()

Перезагрузите с текущим путем и снова вызовите данные

Но когда я пытаюсь выполнить следующую команду из компонента Vue:

this.$router.reload()

Я получаю эту ошибку:

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

Я искал в документах, но не смог найти ничего актуального. Есть ли у провайдера vue/vue-router такая функциональность?

Интересующие меня версии программного обеспечения:

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

PS. Я знаю, что location.reload() - одна из альтернатив, но я ищу собственный вариант Vue.

Ответ 1

this.$router.go() делает именно это; если аргументы не указаны, маршрутизатор переходит к текущему местоположению, обновляя страницу.

Что касается "почему это так": go внутренне передает свои аргументы в window.history.go, поэтому он равен windows.history.go() - который, в свою очередь, перезагружает страницу в соответствии с документом MDN.

_{примечание: поскольку он выполняет "мягкую" перезагрузку на обычном настольном (непереносном) Firefox, при его использовании может появиться куча странных причуд, но на самом деле вам требуется настоящая перезагрузка;}_{используя window.location.reload(true);}_{(https://developer.mozilla.org/en-US/docs/Web/API/Location/reload) упомянутый OP вместо этого может помочь - это определенно решило мои проблемы с FF.}

Ответ 2

Самое простое решение - добавить атрибут: key к:

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

Это связано с тем, что Vue Router не замечает никаких изменений, если к тому же компоненту обращаются. С помощью ключа любое изменение пути вызовет перезагрузку компонента с новыми данными.

Ответ 3

Я проверяю репозиторий vue-router на GitHub, и кажется, что не существует метода reload(). Но в том же файле есть: currentRoute объект.

Источник: vue-router/src/index.js
Документы: docs

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

Теперь вы можете использовать this.$router.go(this.$router.currentRoute) для повторного загрузки текущего маршрута.

Простой пример.

Версия для этого ответа:

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

Ответ 4

Я использовал это: this.$router.push('')

Версия:

"vue": "^2.5.13",
"vue-router": "^3.0.1"

Ответ 5

Это моя перезагрузка. Из-за какого-то браузера очень странно. location.reload не может перезагрузить.

methods:{
   reload: function(){
      this.isRouterAlive = false
      setTimeout(()=>{
         this.isRouterAlive = true
      },0)
   }
}

<router-view v-if="isRouterAlive"/>

Ответ 6

Для повторного отображения вы можете использовать в родительском компоненте

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

Ответ 7

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)

Заметки:

И # должен иметь какое-то значение после него.
Второй хэш маршрута - это пробел, а не пустая строка.
setTimeout, а не $nextTick чтобы сохранить чистоту URL.