Vue.js 为什么在我的nuxt链接中没有'；是否不能用相同的url重新加载页面？

如果我位于URL为“”的页面上，并且我正在单击该页面上的同一链接，则该页面不会重新加载。 我需要做的是，如果我点击相同的链接，页面将重新加载

我的链接：

<nuxt-link :to="/item">

---

欢迎有任何见解。谢谢

使用键，类似于：

<router-view :key="$route.params.yourCustomParam"/>

<router-link :to="{ params: { yourCustomParam: Data.now } }" replace>link</router-link>

此外，您还可以使用以下内容：

<router-view :key="$route.params.yourCustomParam"/>

<router-link :to="{ params: { yourCustomParam: Data.now } }" replace>link</router-link>

链接

---

请记住，

to

被传递给

router.push（）

，并且它也接受一个对象。这样做，它更具声明性和可控性。我用它来决定是否应该重新引用组件的页面，因为它们将基于从URL条目获得的id参数，并且我的子组件仍然可以使用嵌套。

我最近尝试解决一个类似的问题，为了克服这个问题，我使用了

Vuex

和

：key

（）

首先，在您的商店中，您需要一个

状态属性

，例如：

export const state = () => ({
  componentUpdates: {
     item: 0,
     //can add more as needed
  }
})

一般来说，如果您愿意，您可以在整个应用程序中只使用一个属性。请记住，稍后，

键

值需要是唯一的-例如，如果您在一个页面中对两个或多个组件使用此属性，则情况就是如此。在本例中，您可以执行如下操作：

：key=“$store.getters.getComponentUpdates.item+'uniqueString'”

---

然后是一个

getter

：

export const getters = {
   getComponentUpdates(state) {
      return state.updateComponent;
   }
}

最后一种变异：

export const mutations = {
  updateComponent(state, payload) {
     return state.componentUpdates[payload.update]++
  }
}

现在，我们可以在任何需要的地方使用反应式

：键

。 但是首先，在

numxt链接中，让我们添加一个事件来触发突变，注意使用
@click.native
来触发click事件：

<nuxt-link @click.native="$store.commit('updateComponent', { update: 'item'})" :to="/item">

就是这样。正如您所见，此解决方案利用了
numxt link
的优点，但也允许我们仅选择性地更新页面中需要更新的部分（如果需要，我们也可以通过这种方式更新整个页面）


如果您需要从
mounted
或一般的初始加载触发逻辑，那么您可以使用
computed
属性和
：key
到页面的
div
容器中

将
：键添加到
div
：

<template>
  <div :key="$store.getters.getComponentUpdates.item"></div>
</template>


最后一次触摸并不重要，但可以实现，以重置
状态属性
：

export const mutations = {
  updateComponent(state, payload) {
     return state.componentUpdates[payload.update] >= 10
     ? state.componentUpdates[payload.update] = 0
     : state.componentUpdates[payload.update]++
  }
}

不适合我。也许您提供了一个codesandbox链接