Question

如果我在URL为'http://localhost:8080/item'的页面上，并且单击此页面上的相同链接，则该页面不会重新加载。我需要确保，如果我单击相同的链接，页面将会重新加载。

我的链接：

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

任何见识都将受到欢迎。谢谢！

Answer 1

使用密钥，例如：

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

您还可以使用类似的东西：

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

记住to被传递router.push()，并且它也接受一个对象。这样，它更具声明性和可控制性。我正在使用它来决定是否应重新呈现组件页面，因为它们将基于从URL条目获得的id参数，并且我的子组件仍可以使用嵌套。

Answer 2

我最近试图解决一个类似的问题，并且为了克服这个问题，我在Vuex和ref中使用了:key。

首先，在您的商店中，您需要state property，例如：

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

通常，如果您喜欢这种方式，则只能在整个应用程序中使用一个属性。请记住，以后，key值必须是唯一的-例如，如果您将此属性用于一页中的两个或多个组件，就是这种情况。在这种情况下，您可以执行以下操作:key="$store.getters.getComponentUpdates.item+'uniqueString'"

然后是一个getter：

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

最后是一个mutatation：

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

现在，我们可以在需要的地方使用反应式:key。但是首先在您的nuxt-link中添加一个事件来触发突变，请注意@click.native的使用来触发click事件：

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

例如，现在在项目页面中。假设有一个组件需要更新。在这种情况下，我们将添加:key：

<my-item :key="$store.getters.getComponentUpdates.item" />

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

如果您需要从mounted或一般的初始加载中触发逻辑，则可以在您的computed容器中使用:key属性和div在页面<template>中。

将:key添加到div：

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

创建computed属性：

computed: {
  updateItemPage() {
     //run your initial instructions here as if you were doing it in mounted then return the getter
     this.initialLoadMethod()
     return this.$store.getters.getComponentUpdates.item
  }
}

最终接触不是很关键，但可以用来重置state property：

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

为什么在我的nuxt-link中没有使用相同的URL重新加载页面？

2 个答案: