如何使用vue-router实现同一路径根据用户认证状态展示不同视图？

方案一：组件工厂函数动态返回组件 #

你之前的思路可行，但组件工厂函数需要返回import()的Promise（示例代码遗漏了return），同时可以通过全局状态管理（如Pinia/Vuex）或全局变量获取认证状态。另外，Vue Router的组件工厂函数还支持接收route参数，方便基于路由信息做判断。

实现代码：

{
  path: '/mypath/',
  component: async () => {
    // 替换为你的认证状态检查逻辑，比如从状态管理库获取
    const isAuthenticated = await getAuthStatus();
    
    if (isAuthenticated) {
      return import('src/pages/offers/PrivateContent.vue');
    } else {
      return import('src/pages/offers/PublicContent.vue');
    }
  }
}

说明：

• 确保认证状态能被组件工厂函数访问到（比如挂载到全局、用状态管理库存储）
• 必须返回import()结果（一个Promise），Vue Router会自动处理组件的异步加载

方案二：双路由+导航守卫控制匹配 #

定义两条同路径的路由，通过导航守卫在用户未认证时切换到公共路由。关键是给路由设置唯一name，确保跳转时能精准匹配目标路由。

路由定义

[
  {
    path: '/mypath/',
    name: 'PrivateMyPath',
    component: () => import('src/pages/offers/PrivateContent.vue'),
    meta: { requiresAuth: true }
  },
  {
    path: '/mypath/',
    name: 'PublicMyPath',
    component: () => import('src/pages/offers/PublicContent.vue')
  }
]

导航守卫逻辑

router.beforeEach((to, from, next) => {
  const isAuthenticated = checkAuthStatus(); // 你的认证检查逻辑

  // 若访问需要认证的路由但未登录，跳转到同路径的公共路由
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ name: 'PublicMyPath' });
  } else {
    next();
  }
});

说明：

• Vue Router会按路由定义顺序优先匹配第一条路由
• 通过name跳转可避免路径重复导致的导航循环问题

内容的提问来源于stack exchange，提问作者Andre M