vue.js - 当用户未授权时，在登录页面之前看到内部面板的闪烁

Question

每当我进入我的页面时，如果用户登录，我都会重定向到内部面板。我在这里检查

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.authRequired)) {
    const { authState } = useAuthStore(router.pinia);
    if (authState == false) {
      return next('/login')
    }
  }
  next();
});

如果用户未登录，我会看到 0.5 秒的Panel组件闪烁，有没有办法避免这种情况？

const routes = [
  {
    path: "/",
    name: "Base",
    component: Base,
    redirect: "/",
    meta: {
      authRequired: true,
    },
    children: [
      {
        path: "",
        name: "Panel",
        component: Panel,

标签： vue.jsvuejs3