vue-router 中中间件的正确使用方式

Question

我在vue中创建了路由，并在每个路由之前定义了一些中间件条件。但它并没有像我预期的那样工作。

这是

router/index.js

文件。

const token = computed(() => useAuthStore().token);

// Main Router
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'index',
      component: LandingView,
    },
    {
      path: '/login',
      name: 'login',
      component: LoginView,
      beforeEnter: (to, from, next) => {
        if (token.value) {
          return next({ name: 'home' });
        }
        next();
      },
    },
    {
      path: '/signup/:uid?',
      name: 'signup',
      component: SignupView,
    },
    {
      path: '/dashboard',
      name: 'dashboard',
      component: DashboardLayout,
      children: [
        {
          path: '',
          name: 'home',
          component: HomeView,
        },
        {
          path: 'profile',
          name: 'profile',
          component: ProfileView,
        },
        {
          path: 'deposit',
          name: 'deposit',
          component: DepositView,
        },
        {
          path: 'pay-amount/:amount?',
          name: 'pay-amount',
          component: PayAmountView
        },
        {
          path: 'referral',
          name: 'referral',
          component: ReferralView,
        },
        {
          path: 'salary',
          name: 'salary',
          component: SalaryView,
        },
      ],
      meta: {
        requiresAuth: true,
        requiresEmailVerify: true,
        requiresPayment: true,
        requireKyc: true,
      },
    },
    {
      path: '/email-verify',
      name: 'email-verify',
      component: EmailVerifyView,
      meta: { requiresEmailVerify: false },
      beforeEnter: (to, from, next) => {
        if (!useAuthStore().email) {
          next({ name: 'login' });
        }
        next();
      },
    },
  ],
});

router.beforeEach(async (to, from, next) => {
  const { user, getUserDetails } = useUserStore();

  if (!user?.id && !!token.value) {
    await getUserDetails();
  }
  if (to.meta.requiresAuth && !token.value) {
    return next({ name: 'login' });
  } else if (to.meta.requiresEmailVerify && !user.email_verified) {
    next({
      name: 'email-verify',
    });
  } else {
    next();
  }
});

router.afterEach(() => {
  const {sidebarVisible, setSidebarVisible} = useLayoutStore();
  if (sidebarVisible) {
    setSidebarVisible(false);
  }
});

export default router;

我在仪表板中遇到问题。如果我在

/dashboard/deposit

路线上，并且重新加载页面，则路线将更改为

/dashboard

。我认为问题是我在

router.beforeEach

中定义的中间件。

我在另一条路线中遇到同样的问题。

即使重新加载页面，我也想保持相同的路线。

Answer 1

我不确定你运行在什么模式下，根据我的经验，当nginx配置错误时会出现这样的问题。