Чи є у нас router.reload у vue-router?

Я бачу в цьому запиті на витягування :

• Додайте a 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 це або помилка, або пропуск з боку Evan You, оскільки специфікація це явно дозволяє . Я подав звіт про це. Якщо вас справді турбують поточні анотації 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 не помічає жодних змін, якщо адресується той самий компонент. За допомогою ключа будь-яка зміна шляху призведе до перезавантаження компонента новими даними.

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>