Почему beforeRouteUpdate не работает, когда я возвращаюсь на первую страницу? - PullRequest
Новая
       0

Почему beforeRouteUpdate не работает, когда я возвращаюсь на первую страницу?

0 голосов
/ 12 мая 2018

У меня есть компонент с пагинатором. В этом компоненте у меня есть beforeRouteEnter и beforeRouteUpdate для извлечения данных. Я открываю в браузере http://localhost:8080/#/pages/1 После этого я нажимаю по ссылкам ... / pages / 2 ... / pages / 3 и перед тем, как извлечь данные и показать их. Когда я нажимаю на ссылку ... / pages / 1 (это первый путь, до того, как RouteEnter работал с ним), браузер переходит на эту ссылку, но перед RouteUpdate не происходит, и я вижу данные старой страницы

код моего роутера: 

export default new Router({
  mode: 'hash',
  linkActiveClass: 'open active',
  scrollBehavior: () => ({ y: 0 }),
  routes: [{
    path: '/',
    redirect: '/pages/1',
    name: 'Home',
    component: Full,
    children: [{
      path: 'pages/:num?',
      name: 'Pages',
      component: Pages
    }, {
      path: 'pageForm/:id?',
      name: 'PageForm',
      component: PageForm
    }, {
      path: 'settings',
      name: 'Settings',
      component: Settings
    }]
  }]
})

Как я могу решить эту проблему?

UPD:

в App.vue и Full.vue я заменяю 

 <router-view></router-view>

до 

      <transition>
        <keep-alive>
          <router-view></router-view>
        </keep-alive>  
      </transition>

но у меня это не сработало

UPD2

Я делаю в App.vue 

<keep-alive include="full">
  <router-view></router-view>
</keep-alive>

и в Full.vue 

<keep-alive include="Pages">
  <router-view></router-view>
</keep-alive>

но у меня это тоже не сработало

Ответы [ 2 ]

0 голосов
/ 20 мая 2018

Моя ошибка была в моем коде.Я не вызываю next () в beforeRouteUpdate.Сейчас все работает хорошо

0 голосов
/ 12 мая 2018

Ваши компоненты кэшируются vue. Итак, вам нужно использовать keep-alive . Это сохранит ваш компонент свежим и не позволит визуализировать компонент из кэша.

Примечание:

Когда компонент переключается внутри, его активированные и деактивированные ловушки жизненного цикла будут вызываться соответственно.

<keep-alive> не работает с функциональными компонентами, поскольку у них нет экземпляров для кэширования.

...