前端路由是怎么跑起来的，Vue Router 与 React Router 实战

一、路由的本质

抛开框架，路由干的事就一句话：监听 URL 变化 → 找到对应的组件/页面 → 渲染到指定容器。前端路由有两种实现模式：

新手项目图省事可以用 hash；但要 URL 干净、像传统网站，就得用 history，代价是部署时要让服务器把未知路径都回退到 index.html。

二、Vue Router 实战

Vue 3 里这么配：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  { path: '/', name: 'home', component: Home },
  { path: '/user/:id', name: 'user', component: () => import('../views/User.vue') }
]

const router = createRouter({
  history: createWebHistory(),   // 用 history 模式
  routes
})

<!-- 模板里跳转和出口 -->
<router-link to="/">首页</router-link>
<router-view></router-view>

注意 component: () => import(...) 就是路由懒加载——只有访问这个路由才加载对应 JS，首屏更快。

三、React Router 实战

React 用 react-router-dom：

import { BrowserRouter, Routes, Route, useNavigate } from 'react-router-dom'
import Home from './Home'
import User from './User'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/user/:id" element={<User />} />
      </Routes>
    </BrowserRouter>
  )
}

// 在组件里跳转
function Btn() {
  const nav = useNavigate()
  return <button onClick={() => nav('/user/1')}>去用户页</button>
}

React Router v6 用 <Routes> 取代老的 <Switch>，useNavigate 取代 useHistory，写法更直观。

四、嵌套路由与鉴权守卫

真实项目路由是嵌套的（布局页套子页面）。以 Vue 为例：

{
  path: '/dashboard',
  component: Layout,
  children: [
    { path: 'stat', component: Stat },
    { path: 'list', component: List }
  ]
}

鉴权也常在路由层做——没登录就重定向到登录页：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isLogin()) next('/login')
  else next()
})

把"是否登录"的判断放在路由守卫里，比在每个页面里各写一遍干净得多。

五、history 模式刷新 404 这个坑

用 history 模式，本地开发没事，一部署到 Nginx 刷新子路由就 404。原因是：服务器收到 /user/1 真的去磁盘找这个文件，找不到就 404。解决——让服务器把所有未知路径回退到 index.html：

location / {
  try_files $uri $uri/ /index.html;   # 找不到文件就返回 index.html，交给前端路由
}

用 Vite/Webpack 的 historyApiFallback 同理。这一步不配，history 模式基本没法上生产。

小结

前端路由就是"URL 变、视图变、不刷新整页"。两种模式：hash 省事但 URL 带 #，history 干净但要服务端 fallback。Vue 用 createRouter + <router-view>，React 用 <Routes>/<Route>，懒加载记得用动态 import。最后务必记住 history 模式要在 Nginx 配 try_files 回退，否则刷新子路由必 404。把这些理顺，路由这块基本就稳了。