数据获取
导航完成之后获取:先完成导航,然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。
导航完成之前获取:导航完成前,在路由进入的守卫中获取数据,在数据获取成功后执行导航。
导航完成后获取数据
当你使用这种方式时,我们会马上导航和渲染组件,然后在组件的 created 钩子中获取数据。这让我们有机会在数据获取期间展示一个 loading 状态,还可以在不同视图间展示不同的 loading 状态。
假设我们有一个 Post 组件,需要基于 $route.params.id 获取文章数据:
<template>
<div class="post">
<div v-if="loading" class="loading">
Loading...
</div>
<div v-if="error" class="error">
{{ error }}
</div>
<div v-if="post" class="content">
<h2>{{ post.title }}</h2>
<p>{{ post.body }}</p>
</div>
</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
export default {
data() {
return {
loading: false,
post: null,
error: null,
};
},
created() {
// 组件创建完后获取数据,
// 此时 data 已经被 observed 了
this.fetchData();
},
watch: {
// 如果路由有变化,会再次执行该方法
$route: "fetchData",
},
methods: {
fetchData() {
this.error = this.post = null;
this.loading = true;
// 将getPost替换为您的数据获取util / API包装器
getPost(this.$route.params.id, (err, post) => {
this.loading = false;
if (err) {
this.error = err.toString();
} else {
this.post = post;
}
});
},
},
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
在导航完成前获取数据
通过这种方式,我们在导航转入新的路由前获取数据。我们可以在接下来的组件的 beforeRouteEnter 守卫中获取数据,当数据获取成功后只调用 next 方法。
export default {
data() {
return {
post: null,
error: null,
};
},
beforeRouteEnter(to, from, next) {
getPost(to.params.id, (err, post) => {
next((vm) => vm.setData(err, post));
});
},
// 路由改变前,组件就已经渲染完了
// 逻辑稍稍不同
beforeRouteUpdate(to, from, next) {
this.post = null;
getPost(to.params.id, (err, post) => {
this.setData(err, post);
next();
});
},
methods: {
setData(err, post) {
if (err) {
this.error = err.toString();
} else {
this.post = post;
}
},
},
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
在为后面的视图获取数据时,用户会停留在当前的界面,因此建议在数据获取期间,显示一些进度条或者别的指示。如果数据获取失败,同样有必要展示一些全局的错误提醒。