框架集成：20 框架路由与HTML - 详细教程与实战指南

// 两种路由模式：

// 1. Hash模式（兼容性好）
// URL: http://example.com/#/about
// 监听 hashchange 事件
window.addEventListener('hashchange', () => {
  const path = window.location.hash.slice(1);
  renderPage(path);
});

// 2. History模式（推荐，URL更美观）
// URL: http://example.com/about
// 使用 HTML5 History API
history.pushState(state, '', '/about');  // 推入历史
history.replaceState(state, '', '/about'); // 替换当前
window.addEventListener('popstate', () => {
  renderPage(location.pathname);
});

// History API核心方法：
// history.pushState()    - 添加历史记录
// history.replaceState() - 替换当前记录
// history.back()         - 后退
// history.forward()      - 前进
// history.go(n)          - 跳转n步

// 服务端配置（History模式必须）
// 所有路由都返回index.html，让前端路由接管
// Nginx: try_files $uri $uri/ /index.html;

// React Router v6
import { BrowserRouter, Routes, Route, Link, useParams, useNavigate } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">首页</Link>
        <Link to="/about">关于</Link>
        <Link to="/users">用户</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users" element={<UserList />}>
          <Route path=":id" element={<UserDetail />} />  {/* 嵌套路由 */}
        </Route>
        <Route path="*" element={<NotFound />} />  {/* 404 */}
      </Routes>
    </BrowserRouter>
  );
}

// 动态路由参数
function UserDetail() {
  const { id } = useParams();  // 获取 :id
  return <h1>用户 {id}</h1>;
}

// 编程式导航
function LoginForm() {
  const navigate = useNavigate();
  const handleLogin = () => {
    // 登录成功后跳转
    navigate('/dashboard', { replace: true });
  };
}

// 路由守卫（自定义）
function ProtectedRoute({ children }) {
  const isAuthenticated = useAuth();
  if (!isAuthenticated) return <Navigate to="/login" />;
  return children;
}

// 懒加载
const Dashboard = React.lazy(() => import('./Dashboard'));
<Suspense fallback={<Loading />}>
  <Route path="/dashboard" element={<Dashboard />} />
</Suspense>

// Vue Router 4
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  { path: '/', component: () => import('./views/Home.vue') },
  { path: '/about', component: () => import('./views/About.vue') },
  { path: '/users/:id', component: UserDetail, props: true },
  {
    path: '/admin',
    component: AdminLayout,
    children: [  // 嵌套路由
      { path: '', component: AdminHome },
      { path: 'users', component: AdminUsers },
    ],
    meta: { requiresAuth: true }  // 路由元信息
  },
];

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

// 路由守卫
router.beforeEach((to, from) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    return '/login';  // 重定向
  }
});

// 组件中使用
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
router.push('/users/' + userId);
console.log(route.params.id);

// 模板中
<router-link to="/about">关于</router-link>
<router-view />  <!-- 路由出口 -->

// Angular Router
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'users/:id', component: UserDetailComponent },
  {
    path: 'admin',
    component: AdminComponent,
    canActivate: [AuthGuard],  // 路由守卫
    children: [
      { path: '', component: AdminHomeComponent },
      { path: 'users', component: AdminUsersComponent },
    ],
  },
  { path: '**', component: NotFoundComponent },  // 404
];

// 模板中
<a routerLink="/about" routerLinkActive="active">关于</a>
<router-outlet></router-outlet>  <!-- 路由出口 -->

// 编程导航
constructor(private router: Router) {}
this.router.navigate(['/users', userId]);

// SvelteKit（文件系统路由）
// src/routes/
//   +page.svelte       → /
//   about/+page.svelte → /about
//   users/[id]/+page.svelte → /users/:id
//   +layout.svelte     → 布局组件

// 页面组件
<script>
  export let data;  // 从+page.ts加载的数据
</script>
<h1>{data.user.name}</h1>

// +page.ts（数据加载）
export async function load({ params }) {
  const user = await getUser(params.id);
  return { user };
}

// 导航
import { goto } from '$app/navigation';
goto('/about');

// 链接
<a href="/about">关于</a>  <!-- SvelteKit自动拦截 -->