关于vue3中 再进入模块前的一些请求初始化数据的方法

标签：初始化 console 请求 模块 vue3 beforeRouteEnter 数据 log

在进页面前可能需要初始化一些请求数据，用于后续的数据请求

传统的做法是在mounted中嵌套请求方法来请求数据

在vue3 中

我们可以使用 beforeRouteEnter

<script lang="ts"> export default {   async beforeRouteEnter(to: any, from: any, next) {     console.log(111);         await new Promise((resolve, reject) => {       setTimeout(() => {         console.log(222);         next(vm => { 　　　　//vm是当前组件对象 如果想要使用组件中的方法可以通过defineExpose来抛出方法、 　　　　//意思就是不仅可以获取到方法  还可以修改ref初始数据 　　　　//也可以在此更改vuex或者pinia 的数据 用于后续的请求           console.log(vm);         })         resolve(true)       }, 2000);     })      console.log("beforeRouteEnter",to ,from)    } } </script> 在一个 .vue文件中写两个script 第一个中就是上面这个beforeenter方法用于请求初始化数据 下面再写一个script标签用于当前组件正常工作。 原因是因为SFC这种写法中并没有将beforeRouteEnter暴露出来 以上是第一种方法   第二种方法是  {             path: '/book',             name: ’BOOK‘, 　　　 component: () => import('@/pages/book/index.vue')             beforeEnter: async (to, from) => {                 //进入book的时候需要拿到书的type并剔除几种数据的类型用于初始化查数据                 return await getBookType()             },         }, 这种是在路由入口的地方做拦截，在请求完成后可以更新vuex或者pinia来初始化页面接口的请求入参，不过官方没有推荐这张做法，请参考 https://router.vuejs.org/zh/guide/advanced/data-fetching.html 个人比较推荐第二种，可以将每个模块的数据初始化请求接口都写到一起，调用看起来比较整齐，不会显得特别的乱      vue3以本人目前浅薄的学识来看是比较喜欢的前端框架，相较于react 18.3 ，个人使用感觉更加完善、更加简单。      

 

标签：初始化,console,请求,模块,vue3,beforeRouteEnter,数据,log
From： https://www.cnblogs.com/HePandeFeng/p/18619673