19. Vue.js 404、钩子函数

最新推荐文章于 2022-07-05 10:59:44 发布

AlvinUnity

最新推荐文章于 2022-07-05 10:59:44 发布

阅读量162

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue.js 文章标签： vue

本文链接：https://blog.csdn.net/Alvin199765/article/details/108412018

Vue.js 专栏收录该内容

23 篇文章

订阅专栏

本文介绍Vue.js中如何使用路由守卫beforeRouteEnter和beforeRouteLeave进行页面跳转控制，以及如何在beforeRouteEnter中通过Axios发起异步请求获取数据，确保数据加载完成后页面再渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

404

处理 404 需要创建一个名为 NotFound.vue 的视图组件

钩子函数

类似拦截器的作用

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

<script>
  export default {
    props: ['id'],
    name: "UserProfile",
    //在进入路由前执行
    beforeRouteEnter: (to, from, next) => {
      console.log('进入路由之前');
      next();
    },
    //在路由离开前执行
    beforeRouteLeave: (to, from, next) => {
      console.log('离开路由之前');
      next();
    }
  }
</script>

参数说明

to：路由将要跳转的路径信息
from：路径跳转前的路径信息
next：路由的控制参数
next() 跳入下一个页面
next(’/path’)改变路由的跳转方向，使其跳到另一个路由
next(false) 返回原来的页面
next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实例

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

安装Axios

cnpm install axios -s

cnpm install --save vue-axios

main.js引用Axios

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

准备数据

只有static目录下的文件可以被访问到
```
// 静态数据存放的位置
static /mock/data.json
```

profile.vue

在 beforeRouteEnter中执行异步请求

<script>
  export default {
    props: ['id'],
    name: "UserProfile",
    //在进入路由前执行
    beforeRouteEnter: (to, from, next) => {
      console.log('进入路由之前');
      next((vm)=>{
        //进入路由之前执行getData()
        vm.getData();
      });
    },
    //在路由离开前执行
    beforeRouteLeave: (to, from, next) => {
      console.log('离开路由之前');
      next();
    },methods:{
      getData:function () {
        this.axios({
          method:'get',
          url:'http://localhost:8081/static/mock/data.json'
        }).then(function (response) {
          console.log(response)
        })
      }
    }
  }
</script>