designtopack/src/router/router.js

import { createWebHistory, createRouter } from "vue-router";
import routes from "./routes";
import { useApiStore } from "../stores/api";
import { usePageStore } from "../stores/page";
import { useUserStore } from "../stores/user";
import { getActivePinia } from "pinia";

const router = createRouter({
  history: createWebHistory(),
  routes,
});

router.beforeEach(async (to, from, next) => {
  const pinia = getActivePinia();
  const api = useApiStore(pinia);
  const pageStore = usePageStore(pinia);
  const userStore = useUserStore(pinia);

  try {
    const res = await api.fetchData(to.path);

    pageStore.page = res.page;
    userStore.user = res.user;
    next();
  } catch (error) {
    console.error(error);
    next(false);
  }
});

export { router };