Question

我正在使用嵌套的vue-router视图显示内容页面，其中<transition>显示确实发生了更改。目前，它适用于页面更改，但是我也有一些过滤器，这些过滤器会在应用显示内容时更改显示内容，并且由于应用它们并不一定会更改页面，因此Vue不会重新加载组件，这不会应用过渡并且不会不刷新一些数据。因此，基本上我需要的是一种无需更改URL即可强制“刷新”的方法。

目前，我正在:key="$route.fullPath"元素上使用<router-view>属性，该属性可用于更改url，但不能用于刷新。通过使用外部变量并将其添加到:key="$route.fullPath + pageKey"之类的键中并在每次强制刷新之前对其进行递增，我能够模拟所需的行为，但是我觉得此解决方案不干净且不直观。

我目前拥有的是：

<template>
    <section>

        ...

        <transition name="fade" mode="out-in" appear>
            <router-view :key="$route.fullPath + pageKey"></router-view>
        </transition>

        ...

    </section>
</template>

每次强制刷新基本上都是这样：

++this.pageKey;
this.$router.push('/1');

Answer 1

如果您需要在this.pageKey更改时重新加载视图，则可能是因为您在created()或mounted()生命周期处理程序中加载了数据。您的解决方案是有可能的，并且如果您要求过渡以this.pageKey的变化进行播放，那么这可能是唯一的真实可能性。

否则，请考虑将加载数据的逻辑转移到方法上，并将其加载到this.pageKey上立即调用的观察程序中。这意味着它将在启动时加载，并且在更改pageKey时也会加载。

computed: {
  // Vuex if you use it, or some other way of storing the pageKey
  ...mapGetters('pageKey')
},

watch: {
  pageKey: {
    immediate: true,
    handler () {
      this.loadData();
    }
  }
},

methods: {
  loadData() {
    // noop
  }
}

如果您想完全消除pageKey，一种方法是简单地在刷新按钮的点击处理程序中调用loadData或发出一个事件。如果对于传统事件而言，包含按钮的组件和处理数据加载的组件放置得不好，则可以始终创建事件总线并以这种方式监听它：

// main.js
Vue.prototype.$bus = new Vue();

// MyComponent.vue
created() {
  this.$bus.$on('force-refresh', this.loadData);
},

beforeDestroy() {
  // Prevent memory leaks
  this.$bus.$off('force-refresh', this.loadData);
},

methods: {
  loadData() {
    // noop
  }
}

// MyButton.vue
<template>
  <button @click="forceRefresh">I want all the new data</button>
</template>

<script>
export default {
  methods: {
    forceRefresh() {
      this.$bus.$emit('force-refresh');
    }
  }
}
</script>

有没有一种方法可以强制在同一路径内重新加载路由器视图组件？

1 个答案: