前端面试：Vue Router / Pinia

1. Vue Router 有哪几种模式？

主要是 hash 和 history。hash 兼容性好，不需要服务端额外配置；history URL 更干净，但刷新页面需要服务端配置 fallback。

2. 路由守卫有哪些？

全局守卫 beforeEach/afterEach，路由独享守卫 beforeEnter，组件内守卫。常用于登录鉴权、权限控制、页面标题、埋点。

3. SPA 首屏慢怎么优化？

路由懒加载、组件懒加载、减少首屏包体积、CDN、资源压缩、接口缓存、骨架屏、预加载关键资源、拆分第三方库。

4. Pinia 和 Vuex 区别？

Pinia 更轻量，TS 支持更好，没有 mutation，直接通过 action 修改状态，模块组织更简单，是 Vue3 更推荐的状态管理方案。

5. Pinia 的 state、getter、action 是什么？

state 存状态，getter 做派生计算，action 处理业务逻辑和异步请求。

6. 页面刷新后 Pinia 数据丢失怎么办？

可用 localStorage/sessionStorage 或持久化插件。token 可以持久化，用户信息可以刷新后重新请求，避免缓存过期数据。

7. 如何设计用户登录状态管理模块？

store 中保存 token、用户信息、权限列表；登录成功存 token；刷新时根据 token 拉用户信息；退出时清空状态和缓存；路由守卫判断权限。

8. 多个页面共享筛选条件或表单状态怎么办？

如果只是页面内短期状态，用路由 query；如果跨页面共享，用 Pinia；如果需要刷新保留，可同步到本地缓存。