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

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

传统的做法是在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 ，个人使用感觉更加完善、更加简单。