Vue.js router.push 更改 URL，但 RankerDetail 组件不会在按钮导航上更新

Question

我正在使用 vue-router 开发 Vue.js 应用程序，但我的

RankerDetail

组件遇到了问题。该组件的目的是根据路由参数id显示不同的数据。当我在浏览器中手动输入 URL（例如，

/Ranker/1

、

/Ranker/2

）时，RankerDetail 组件会正确显示相应的数据。但是，当使用

navigateToNextCase()

和

navigateToPreviousCase()

方法进行导航时，浏览器中的 URL 会发生变化（从

/Ranker/1

到

/Ranker/2

），但组件不会更新以显示新案例的数据。

这就是 router.js 的配置方式：

const routes = [
    // Other routes...
    { path: '/Ranker/:id', name: 'RankerDetail', component: RankerDetail, props: true, meta: { requiresAuth: true } },
];

以下是相关的路线配置和导航方法：

function navigateToPreviousCase() {
  const currentId = parseInt(route.params.id);
  if (currentId > 1) {
    const previousId = currentId - 1;
    router.push({ name: 'RankerDetail', params: { id: previousId } });
  }
}

function navigateToNextCase() {
  const currentId = parseInt(route.params.id);
  const nextId = currentId + 1;
  router.push({ name: 'RankerDetail', params: { id: nextId } });
}

问题似乎在于通过导航按钮更改路由参数后视图不会重新渲染，即使浏览器中的 URL 正确更新也是如此。直接在浏览器中输入网址时不会出现此问题。

如何确保在

RankerDetail

和

navigateToNextCase()

方法中导航时

navigateToPreviousCase()

组件刷新并显示正确的数据？当通过这些方法导航时，什么可能导致组件对路由参数更改不做出反应？

Answer 1

方法一：

您可以对路由器 URL 中传递的参数使用 watch 功能。

可以使用路由器对象 [const router = useRouter()] 检查参数，如下

router.currentRoute.value.params.id

当参数发生任何变化时，根据您的要求更新值或调用任何 API 来更新值。

方法2：

不推荐

您可以使用 JavaScript

window

对象在之后重新加载整个页面

router.push()

被调用。

window.reload()