Sometimes, we want to access async store data in Vue Router for usage in beforeEnter hook.

In this article, we’ll look at how to access async store data in Vue Router for usage in beforeEnter hook.

How to access async store data in Vue Router for usage in beforeEnter hook?

To access async store data in Vue Router for usage in beforeEnter hook, we can set beforeEnter to an async function.

For instance, we write

const routes = [
  //...
  {
    path: "/example",
    component: Example,
    beforeEnter: async (to, from, next) => {
      const response = await store.dispatch("initApp");
      //...
    },
  },
  //...
];

to set beforeEnter to an async function that calls store.dispatch.

We get the promise it returns and use await to get the response value.

Conclusion

To access async store data in Vue Router for usage in beforeEnter hook, we can set beforeEnter to an async function.