vue路由怎么配，hash 和 history 模式取舍说清

Vue 3 新项目装上 vue-router 4，createRouter 那几行写完，本地跑得好好的，部署上去一刷新就 404。这是 history 模式没配服务端重写，vue路由的入门坎基本都卡在这。

最小骨架和两种模式

createRouter({ history: createWebHistory(), routes })

路由表是个数组，每项配 path 和 component，动态参数写成 /user/:id。模式二选一：hash 模式用 createWebHashHistory，地址带个井号，扔到任何静态服务器都能跑；history 模式地址干净，但刷新会 404，得让服务器把找不到的路径都回退到 index.html，nginx 一般一句 try_files 的事。本地开发 vite 帮你兜着，上生产才暴露问题。

嵌套、跳转和取参数

后台布局左侧固定右侧换内容，就用 children 嵌套，父组件里放 router-view 当出口，子路由的 path 不写斜杠会自动拼接。跳转两条路：模板里用 router-link，逻辑里用 router.push；动态参数在组件里用 useRoute().params 取，问号参数在 route.query 里。

守卫和懒加载

需要登录的页面在全局前置守卫里拦：beforeEach 读 token，没有就重定向到 /login，带上 redirect 参数，登录完好跳回原页面。路由组件默认全打进一个包，首屏慢，把 component 写成 () => import('./views/User.vue') 就变成按需加载，切到才下载。

选型判断：内部管理系统、不在乎地址栏井号，hash 模式最省心；对外要做 SEO 的页面，上 history 模式加服务端重写，两样缺一样都白搭。