其他分享
首页 > 其他分享> > VueRouter 路由钩子与异步请求

VueRouter 路由钩子与异步请求

作者:互联网

路由中的钩子函数

案例代码如下:

  export default {
    props: ['id'],
    name: "UserProfile",
    beforeRouteEnter: (to, from, next) => {
      console.log("准备进入个人信息页");
      next();
    },
    beforeRouteLeave: (to, from, next) => {
      console.log("准备离开个人信息页");
      next();
    }
  }

参数说明:

在钩子函数中使用异步请求

安装 Axios

npm install axios -s --registry=https://registry.npm.taobao.org

引用 Axios

import axios from 'axios'
Vue.prototype.axios = axios;

在 beforeRouteEnter 中进行异步请求,案例代码如下:

  export default {
    props: ['id'],
    name: "UserProfile",
    beforeRouteEnter: (to, from, next) => {
      console.log("准备进入个人信息页");
      // 注意,一定要在 next 中请求,因为该方法调用时 Vue 实例还没有创建,此时无法获取到 this 对象,在这里使用官方提供的回调函数拿到当前实例
      next(vm => {
        vm.getData();
      });
    },
    beforeRouteLeave: (to, from, next) => {
      console.log("准备离开个人信息页");
      next();
    },
    methods: {
      getData: function () {
        this.axios({
          method: 'get',
          url: 'http://localhost:8080/static/data.json'
        }).then(function (repos) {
          console.log(repos);
        }).catch(function (error) {
          console.log(error);
        });
      }
    }
  }

 

标签:异步,axios,console,log,next,VueRouter,beforeRouteEnter,路由
来源: https://www.cnblogs.com/xianquan/p/12493589.html