У нас есть 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.

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

_{Примечание: текущая реализация маршрутизатора и его компонентов истории не помечает параметр как необязательный, но IMVHO это либо ошибка, либо упущение со стороны Эвана Ю, поскольку спецификация явно допускает это . Я подал отчет об этом. Если вас действительно беспокоят текущие аннотации TS, просто используйте эквивалентthis.$router.go(0)}

Что касается «почему это так»: 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.}

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

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

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

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

Документы Vue-Router:

Я проверил репозиторий vue-router на GitHub, и похоже, что reload()метода больше нет. Но в том же файле есть: currentRouteobject.

Источник: 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"

Используйте, router.go(0)если вы используете Typescript, и он запрашивает аргументы для метода 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')

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

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

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

Разрешите маршрут к URL-адресу и перемещайтесь по окну с помощью 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)

Этот метод заменяет URL-адрес и заставляет страницу выполнять полный запрос (обновление), а не полагаться на Vue.router. $ router.go у меня не работает, хотя теоретически это должно быть.

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

Я пробовал это для перезагрузки текущей страницы.

vueObject.$forceUpdate();

почему вы не используете метод 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)

Примечания:

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

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

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