Vue.js路由 -- 路由数据获取

vue-router 之 路由数据获取

目录

             1.数据获取

1.1导航完成之后获取

1.2导航完成之前获取

1.3扩展 - nprogress

---

1.数据获取

有的时候，进入某个路由以后，我们需要从服务端获取数据，比如 /item/:itemId ，通常，我们有两种方式来实现

• 导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据，在数据获取期间显示加载中之类的 loading 提示
• 导航完成之前获取： 导航完成之前，在路由进入的守卫中获取数据，在数据获取成功以后执行导航。

这两种方式都没有任何问题（对错、好坏），自行选择

1.1导航完成之后获取

<template>
    <div>
        <template v-if="loading">
            Loading......
        </template>

        <template v-if="hasError">
            <h2>没有该商品信息</h2>
        </template>

        <template v-if="item">
            <h2>商品详情 - {{item.name}}</h2>
            <dt>ID</dt>
            <dd>{{item.id}}</dd>
            <dt>名称</dt>
            <dd>{{item.name}}</dd>
            <dt>价格</dt>
            <dd>{{item.price|RMB}}</dd>
        </template>
    </div>
</template>
<script>
import axios from 'axios';
import {RMB} from '@/filters/RMB';
export default {
    name: 'item',
    props: ['itemId'],
    data() {
        return {
            loading: false,
            hasError: false,
            item: null
        }
    },
    filters: {
        RMB
    },
    watch: {
        itemId() {
            this.getItem();
        }
    },
    created() {
        this.getItem();
    },
    methods: {
        getItem() {
            this.loading = true;
            if (this.itemId) {
                axios({
                    url: `/api/item/${this.itemId}`
                }).then(res => {
                    this.item = res.data;
                }).catch(err=>this.hasError=true).then(_=>{
                    this.loading = false;
                });
            }
        }
    }
}
</script>

1.2导航完成之前获取

// item.vue

<script>
export default {
  ...,
  beforeRouteEnter( to, from, next ) {
    console.log('开始');
    return axios({
      url: `/api/item/${to.params.itemId}`
    }).then(res => {
      // 注意 beforeRouteEnter 还不能获取组件实例
      next(vm => {
        vm.item = res.data;
      });
    }).catch(err=>{
      next(vm => {
        vm.hasError = true;
      });
    });
  },
  beforeRouteUpdate(to, from, next) {
    return axios({
      url: `/api/item/${to.params.itemId}`
    }).then(res => {
      // 注意 beforeRouteEnter 还不能获取组件实例
      this.item = res.data;
    }).catch(err=>{
      this.hasError = true;
    });
  }
}
</script>

1.3扩展 - nprogress

NProgress: slim progress bars in JavaScript

安装

npm i nprogress
// OR
yarn add nprogress

配合 router 全局守卫

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

const router = new Router({
  //...
});    
router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})

router.afterEach((to, from, next) => {
  NProgress.done()
})

export default router