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">

阅读数据获取指南以获取更多信息。