在最近的帖子中, 更多 Advanced Routing with Vue,我们涵盖了使用Vue Router的过渡,这次我们将涵盖Vue Router的数据检索。
数据检索允许我们在我们的路由组件中加载非同步数据. 我们还可以指定数据是否在加载组件之前或之后被收集。
展望项目设置
由于这是关于先进的 Vue Router技术的另一个帖子,我们将假定你已经熟悉基本的设置,但是,让我们定义一个我们将使用的其他帖子的起点:
1# Yarn
2$ yarn add vue-router
3
4# npm
5$ npm install vue-router --save
1[label main.js]
2import Vue from 'vue';
3import VueRouter from 'vue-router';
4
5import App from './App';
6import Swamp from './components/Swamp';
7import Gator from './components/Gator';
8
9Vue.use(VueRouter);
10
11const router = new VueRouter({
12 routes: [
13 { path: '/swamp', component: Swamp },
14 { path: '/gator', component: Gator }
15 ]
16});
17
18new Vue({
19 render: h => h(App),
20 router
21}).$mount('#app')
1[label App.vue]
2<template>
3 <div id="app">
4 <div class="nav">
5 <router-link to="/swamp">Swamp</router-link> |
6 <router-link to="/gator">Gator</router-link>
7 </div>
8 <hr />
9 <div class="router-view">
10 <router-view></router-view>
11 </div>
12 </div>
13</template>
14
15<script>
16export default { name: 'App' }
17</script>
1[label components/Swamp.vue]
2<template>
3 <div>Welcome to the Swamp, {{ name }}!</div>
4</template>
5
6<script>
7export default {
8 name: 'Swamp',
9 data() {
10 return { name: null }
11 },
12}
13</script>
1[label components/Gator.vue]
2<template>
3 <div>Howdy, Gator {{ name }}!</div>
4</template>
5
6<script>
7export default {
8 name: 'Gator',
9 data() {
10 return { name: null }
11 }
12}
13</script>
数据捕捉
假设我们有一个功能,嘲笑一个简单的HTTPGET称为pretendGet():
1[label scripts/pretendGet.js]
2export default (callback) => {
3 setTimeout(() => {
4 callback(null, 'Alice');
5 }, 500);
6}
500ms 后,pretendGet() 会将字符串Alice返回回回调用方法callback。
航行前的航行
导航前检索允许我们确保我们的路由组件在向用户显示之前有所需的数据。在此方法中,我们添加了一种beforeRouteEnter方法,Vue Router在用户要求导航到该组件之前,但在它已加载时呼叫它。
1[label components/Gator.vue]
2import pretendGet from '../scripts/pretendGet';
3
4export default {
5 name: 'Gator',
6 data() {
7 return { name: null }
8 },
9 // Component not loaded yet
10 beforeRouteEnter(to, from, next) {
11 pretendGet((err, name) => {
12 next(vm => vm.setName(err, name));
13 });
14 },
15 // Component already loaded and route changes
16 beforeRouteUpdate(to, from, next) {
17 this.name = null;
18 pretendGet((err, name) => {
19 this.setName(err, name);
20 next();
21 });
22 },
23 methods: {
24 setName(err, name) {
25 if (err) {
26 console.error(err);
27 } else {
28 this.name = name;
29 }
30 }
31 }
32}
请记住,导航不会发生,直到数据被提取为止. 由于这个原因,显示某种进度栏或数据被提取的指标是一个好主意。
航行后追踪
在这种情况下,我们将使用created() lifecycle hook来调用我们的数据采集方法fetchName()。
1[label components/Swamp.vue]
2import pretendGet from '../scripts/pretendGet';
3
4export default {
5 name: 'Swamp',
6 data() {
7 return { name: null }
8 },
9 created() {
10 this.fetchName();
11 },
12 watch: {
13 // Re-fetch when route changes
14 '$route': 'fetchName'
15 },
16 methods: {
17 fetchName() {
18 pretendGet((err, name) => {
19 if (err) {
20 console.error(err);
21 } else {
22 this.name = name;
23 }
24 });
25 }
26 }
27}
请记住,通过这种方法,我们将不得不考虑数据在元件首次渲染时没有准备好,包括位置持有者或骨骼位置持有者以及指标,以便让用户知道数据正在收集,以及可能发生的任何错误。
包装上
Vue Router Data Fetching 是确保依靠从外部来源获取数据的组件的无缝用户体验的一种很好的方法。在导航之前进行检索是一个很好的方法,如果你喜欢使用应用范围内的通知或进度指标。