15.Vue的路由钩子

1.什么是路由钩子

• beforeRouteEnter：在进入路由前执行
• beforeRouteLeave：在离开路由前执行

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

参数说明：

• to：路由将要跳转的路径信息
• from：路径跳转前的路径信息

• next：路由的控制参数

  • next() 跳入下一个页面
  • next('/path') 改变路由的跳转方向，使其跳到另一个路由
  • next(false) 返回原来的页面
  • next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实例

2.导入

注：npm不行就用cnpm，cnpm不行就用npm

npm install --save axios vue-axios

cnpm install

3.main.js中配置

// 安装异步通信工具
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios);

4.准备数据

在static文件夹中建立mock文件夹，在建立一个data.json文件

{
  "name": "第一个Axios程序",
  "url": "https://www.cnblogs.com/zhihaospace/p/12078861.html",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "科大南区",
    "city": "安徽",
    "country": "中国"
  },
  "links": [
    {
      "name": "海恋天",
      "url": "https://www.cnblogs.com/zhihaospace/"
    },
    {
      "name": "Vue的组件",
      "url": "https://www.cnblogs.com/zhihaospace/p/12078835.html"
    },
    {
      "name": "Vue的双向绑定",
      "url": "https://www.cnblogs.com/zhihaospace/p/12078708.html"
    }
  ]
}

5.修改Profile.vue文件

<template>
  <div>
    <div>个人信息</div>
    编号：{{$route.params.userId}}
    <br>
    姓名：{{$route.params.userName}}
  </div>

</template>

<script>

  export default {
    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/mock/data.json'
        }).then(function (repos) {
          console.log(repos);
        }).catch(function (error) {
          console.log(error);
        });
      }
    }
  }
</script>


<style scoped>

</style>

展示：