Vue-router 正在更改 url 但不重新渲染组件

Question

首先我检查并打开历史模式，我像这样调用vue-router：

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

我当前的路线是/page/item/8，我正在重定向到/page/item/9。目前，网址发生了变化，但页面不会重新呈现，让我看到之前的视图。

这个重定向是这样完成的：

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?',
      },
    ],
  },
];

任何想法，我已经调整了代码以删除识别代码，如果看起来有点奇怪，请道歉。

Answer 1

只有 itemId 路由参数在改变。在这种情况下，由于在过渡前后使用了相同的路由组件，vue-router 将重用现有的路由组件；它们不会被破坏和重建。因此，如果您在组件 created 或 mounted 钩子中加载数据，那么它们将不会在路由更改后再次被调用。相反，您需要使用beforeRouteUpdate 或观看$route 进行更改。

如果你想强制组件被销毁并重新创建（不推荐）那么你需要在路由上key<router-view>：

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

阅读Data Fetching 指南了解更多信息。