Повторное использование компонента Vue-router - PullRequest
Новая
       8

Повторное использование компонента Vue-router

0 голосов
/ 25 сентября 2018

Я хотел бы знать, как я могу остановить повторное использование компонента в Vue-router.

Я создаю простое приложение страницы и не могу обновить данные последважды щелкнув одну и ту же ссылку.

Возможно ли как-то принудительно перезагрузить компьютер или каковы лучшие практики в моей ситуации?

Ответы [ 3 ]

0 голосов
/ 04 октября 2018

Vue Router повторно использует один и тот же компонент, поэтому подключенный хук не вызывается.Как указано в документации:

Один и тот же экземпляр компонента будет использоваться повторно [...], перехваты жизненного цикла компонента не будут вызываться.

Если вы хотитедля обновления данных у вас есть две опции:

  • Наблюдать за объектом $ route 

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // react to route changes...
    }
  }
}
  • Использовать защиту навигации beforeRouteUpdate 

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

Более подробное объяснение вы можете найти в разделе Реагирование на изменения параметров документации Vue Router: https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes.

0 голосов
/ 13 февраля 2019

Используйте атрибут key для router-view, установленного на текущий URL.Он встроен, поэтому нет необходимости писать код. 

<router-view :key="$route.fullPath"></router-view>
0 голосов
/ 25 сентября 2018

Один из способов сделать это - поставить ключ на router-view и добавить строку запроса метки времени к router-link

const Home = {
    template: '<div>Home</div>',
    created() {
        console.log('This should log everytime you click home.');
    },
};

const router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '/', component: Home },
    ]
});

new Vue({
    router,
    el: '#app',
});
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>


<div id="app">
  <router-link :to="`/?q=${Date.now()}`">/home</router-link>
  <router-view :key="$route.fullPath"></router-view>
</div>

Одна из причин, по которой этого не сделать, заключается в том, что это приведет к повторному выполнению операций с компонентами, которые вы, возможно, захотите использовать повторно, например на маршрутах типа

  • /posts/1
  • /posts/2
...