Is fetching data in `beforeEnter` and pass props to component is OK? #1938

dante01yoon · 2023-07-21T04:56:08Z

dante01yoon
Jul 21, 2023

Greetings,

I'm finding good data fetching patterns combine with vue-router.
One approach would be below, fetching data inside beforeEnter and pass props to Component. Is this normal approach?

const router = VueRouter.createRouter({
  history: VueRouter.createWebHistory(),
  routes: [
    ...,
    {
      path: "/post", 
      component: PostTableView,
      // route navigation guard
      beforeEnter: async (to, from, next) => {
        await new Promise((resolve) => {
          setTimeout(() => {
            resolve({ name: "PostTable"});
          },3000)
        }).then(({name}) => {
          to.meta.name = name;
        })
        next();
      },
      props: route => {
        return {
          name: route.meta.name
        }
      }
    },
    ...
  ]
})

Also, I wonder why there is no onBeforeEnter hook in vue-router@v4. (Guess route navigation guard's beforeEnter can do that?) but can't find any history on this.