我太懂这个坑了——直接配置两个path=''的路由肯定没用，路由系统是自上而下按顺序匹配的，第一个命中就直接走了，根本不会去判断后面的权限逻辑。要实现基于用户权限的根路径跳转，你需要把根路由改成一个带权限判断的“中转站”，而不是硬塞重复路径的路由。

核心思路 #

放弃设置多个同路径路由，只保留一个path=''的根路由，在这个路由的进入逻辑里完成权限判断，然后动态重定向到对应页面。下面分两种常用框架给出具体实现：

1. Vue Router 实现方案 #

方式一：用beforeEnter路由守卫直接跳转

在routing.ts里只保留一个空路径路由，通过路由守卫做权限判断：

const routes = [
  {
    path: '',
    beforeEnter: (to, from, next) => {
      // 这里替换成你的实际权限判断逻辑，比如从本地存储/接口拿用户角色
      const hasAdminPermission = localStorage.getItem('userRole') === 'admin';
      
      // 根据权限跳转到对应页面
      hasAdminPermission ? next('/admin-dashboard') : next('/user-home');
    }
  },
  // 其他业务路由
  { path: '/admin-dashboard', component: AdminDashboard },
  { path: '/user-home', component: UserHome }
];

方式二：用临时组件做跳转（适合需要加载状态的场景）

如果需要给用户显示加载动画，可以创建一个空组件来处理跳转：

<!-- RootRedirect.vue -->
<script setup>
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

onMounted(async () => {
  // 如果是异步获取权限（比如从接口拉用户信息），要先等请求完成
  // const userInfo = await fetchUserInfo();
  const hasAdminPermission = localStorage.getItem('userRole') === 'admin';
  
  router.push({ path: hasAdminPermission ? '/admin-dashboard' : '/user-home' });
});
</script>

<template>
  <div class="loading">正在跳转...</div>
</template>

然后在路由配置里指向这个组件：

{
  path: '',
  component: RootRedirect
}

2. React Router（v6+）实现方案 #

方式一：用Navigate组件直接判断

在路由配置里用Navigate组件做条件跳转：

import { Navigate } from 'react-router-dom';

const routes = [
  {
    path: '',
    element: (
      // 替换成你的权限判断逻辑
      localStorage.getItem('userRole') === 'admin'
        ? <Navigate to="/admin-dashboard" replace />
        : <Navigate to="/user-home" replace />
    )
  },
  { path: '/admin-dashboard', element: <AdminDashboard /> },
  { path: '/user-home', element: <UserHome /> }
];

方式二：用自定义组件处理异步权限

如果权限是异步获取的，写一个自定义组件来处理：

import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

function RootRedirect() {
  const navigate = useNavigate();

  useEffect(() => {
    const checkPermission = async () => {
      // 异步获取用户权限
      // const userInfo = await fetch('/api/user-info');
      const isAdmin = localStorage.getItem('userRole') === 'admin';
      
      navigate(isAdmin ? '/admin-dashboard' : '/user-home', { replace: true });
    };

    checkPermission();
  }, [navigate]);

  return <div>加载中...</div>;
}

// 路由配置
{ path: '', element: <RootRedirect /> }

关键注意事项 #

• 绝对不要配置多个相同path的路由，路由系统不会做“权限匹配”，只会按顺序取第一个匹配项。
• 如果是异步获取权限，一定要等权限数据返回后再执行跳转，避免出现未授权的页面跳转。
• 用replace模式跳转（比如Vue的next({ replace: true })或React的navigate(..., {replace: true})），可以避免用户点击返回时回到根路由。

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