VueJS перезагрузить, если на том же маршруте

Question

Мы хотим, чтобы, если мы нажмем на ссылку маршрутизатора, которая является той же самой страницей, страница перезагрузится.

Как это можно сделать? watch->$route не вызывается, если страница остается прежней

Answer 1

Попробуйте использовать @click (или @click.native) на <router-link> для выполнения таможенного кода, когда пользователь нажимает на него.

Теперь это кажется плохой идеей, потому что вам придется использовать этот метод на каждом <router-link> в любом компоненте. Решением было бы обернуть псевдо-компонент <router-link> другим удобным (!) Компонентом, называемым routerLink == <router-link>. Я уже делаю нечто подобное с оригинальным компонентом <transition>, и он работает как шарм. это не решает проблему необходимости импортировать этот компонент и использовать его во всех компонентах, нуждающихся в <router-link>, но это будет означать, что у вас есть централизованное место для добавления вашей пользовательской логики для события щелчка, а не повторения его снова или измените его в нескольких местах, когда вам нужно.

Сейчас у меня нет доступного проекта Vue.js, чтобы проверить это, поэтому, если подход @click(.native) не работает, потому что <router-link> является псевдо-компонентом, просто примените прослушиватель событий к вновь созданному пользовательский компонент.

Answer 2

Если вам нужно просто «обновить» компонент из-за изменения параметра маршрута, попробуйте это:

// define a watcher 
watch: {
    "$route.params.id"(val) {
      // call the method which loads your initial state
      this.find();
    },
},

где "id" происходит из / myroute /: id и find () - это обычный метод.

Answer 3

Это то, что вы ищете Vuew-Router Navigation Guards

Answer 4

Вы можете использовать "beforeEnter" Док.

   { 
     path: '/foo', component: Foo,
     beforeEnter: (to, from, next) => {
       /*
        todo check if to === from
        Warning!: location.reload()  completely destroy all vuejs stored states
        */
        window.location.reload()
        return next()
     }
   }