Блог

Прежде всего, я проверил, и включен режим истории, я вызываю vue-router так:

 const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: routes,
});
 

Текущий маршрут, на котором я нахожусь /page/item/8 , и я перенаправляю /page/item/9 . В настоящее время URL-адрес изменяется, но страница не перерисовывается, оставляя меня в том же виде, который у меня был раньше.

Это перенаправление выполняется следующим образом:

 this.$router.push({ name: 'PageItem', params: { itemId: '9' }}).catch(err => {
  // Stop Vue.router throwing an error if a user clicks on a notification with the same route.
  if (err.name !== 'NavigationDuplicated') {
    this.$logger.debug.log(err);
  }
});
 

Рассматриваемый маршрут выглядит так:

 import PageWrapper from '@/layouts/PageWrapper';
    
export default [
  {
    path: '/page',
    name: 'page',
    component: PageWrapper,
    children: [
      ... Other Routes ...
      {
        component: () => import(/* webpackChunkName: "page-item" */'@/pages/PageItem'),
        name:      'PageItem',
        path:      '/item/:itemId/:view?',
      },
    ],
  },
];
 

Любые идеи, я изменил код, чтобы удалить идентификационный код, поэтому извиняюсь, если это выглядит немного странно.

Меняется только параметр itemId маршрута. В этой ситуации, поскольку одни и те же компоненты маршрута используются до и после перехода, vue-router повторно использует существующие компоненты маршрута; они не уничтожаются и не воссоздаются. Поэтому, если вы загружаете данные в компонент created или mounted хуки, они не будут вызываться снова после изменения маршрута. Вместо этого вам нужно использовать beforeRouteUpdate или следить $route за изменениями.

Если вы хотите принудительно уничтожить и воссоздать компонент (не рекомендуется), тогда вам необходимо key указать <router-view> маршрут:

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

Для получения дополнительной информации прочитайте руководство по выборке данных.