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。目前，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?',
      },
    ],
  },
];

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

Answer 1

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

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

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

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

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

Vue-router is changing the url but not re-rendering the component

vue.js

vue-router