Question

我正在开发一个vuejs SPA。我有一个显示项目列表的视图和另一个显示特定项目详细信息的视图。

当我点击项目时，我使用以下方式切换视图：

this.$router.push('/item/' + event.ItemId );

使用vuex模块管理数据。

我希望在重试项目详细信息时允许一些临时显示（即不阻止项目详细信息视图的呈现，该视图本身应该知道它仍然在等待数据）。

我还必须考虑如果URL被更改它应该可以工作（我想我读到，当只有项ID在URL中更改时，视图没有被重新加载/重新创建存在问题。

触发（异步）检索呈现项目详细信息视图所需数据的适当位置（代码/生命周期）在哪里？

Answer 1

我希望在重试项目详细信息时允许一些临时显示（即不阻止项目详细信息视图的呈现，该视图本身应该知道它仍然在等待数据）。

实现这一目标的一种方法是定义一个状态变量，例如， {V}组件的isLoading上下文中的data。然后，此变量将为true，同时异步检索数据。在模板中，您可以使用v-if在加载时显示微调器，并在此之后显示内容。

如果您要多次检索数据（刷新视图），我会将检索代码移动到一个方法中，例如叫loadData。在Vue组件的mounted部分，您最初可以调用此方法一次。

以下是一些示例代码：

<template>
  <div>
    <button @click="loadData" :disabled="isLoading">Refresh</button>
    <div class="item" v-if="!isLoading">
      {{ item }}
    </div>
    <div class="spinner" v-else>
      Loading...
    </div>
  </div>
</template>

<script>
import HttpService from '@/services/HttpService';

export default {
  name: 'item-details',
  data () {
    return {
      isLoading: false,
      item: {}
    };
  },
  methods: {
    loadData () {
      this.isLoading = true;
      HttpService.loadData().then(response => {
        this.item = response.data;
        this.isLoading = false;
      }, () => {
        this.item = {};
        this.isLoading = false;
      });
    }
  },
  mounted () {
    this.loadData();
  }
};
</script>

我还必须考虑如果URL被更改它应该可以工作（我想我读到，当只有项ID在URL中更改时，视图没有被重新加载/重新创建存在问题。

如果您未使用HTML5历史记录模式，而是使用URL中的锚点（#），则会出现此问题。如果您只是在URL中的锚点之后更改部件，则浏览器实际上不会刷新页面。在这种情况下，Vue组件不会被重新加载，并且状态仍然是旧的。基本上有两种方法：

您正在使用HTML5 history mode, supported by the Vue Router从网址中的锚点切换到真实网址。但这需要一些后端配置。然后浏览器没有这种错误行为，因为没有锚。它会在每次手动更改URL时重新加载页面。
您可以观看$route对象以获得有关每次路线更改的通知。根据用户是否在锚点之后或之前更改部件，行为是不同的（它还取决于光标所在的位置，当您按下Enter键时）。如果更改锚点后的部分（您的实际Vue路径），则仅通知组件。否则，将进行整页刷新。这是一些示例代码：
```
// ...inside a Vue component
watch: {
    '$route' (to, from) {
        this.loadData();
    }
}
```

vuejs代码/生命周期中应该触发数据检索的位置

1 个答案: