https://fe-interview.pangcy.cn/tags/spa%E5%8E%9F%E7%90%86/Recent content in SPA原理 on ZiYang FrontEnd InterviewHugoen-usThu, 06 Mar 2025 13:07:39 +0800https://fe-interview.pangcy.cn/docs/framework/vue2/vue2-33/Tue, 04 Mar 2025 07:00:27 +0000https://fe-interview.pangcy.cn/docs/framework/vue2/vue2-33/<h2 id="路由跳转与locationhref的本质区别">路由跳转与location.href的本质区别 <a href="#%e8%b7%af%e7%94%b1%e8%b7%b3%e8%bd%ac%e4%b8%8elocationhref%e7%9a%84%e6%9c%ac%e8%b4%a8%e5%8c%ba%e5%88%ab" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><h3 id="考察点分析">考察点分析 <a href="#%e8%80%83%e5%af%9f%e7%82%b9%e5%88%86%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><p>本题主要考察候选人三个核心能力：</p> <ol> <li><strong>SPA原理理解</strong>：是否掌握前端路由与浏览器原生跳转的底层差异</li> <li><strong>性能优化意识</strong>：能否从用户体验角度分析不同导航方式的优劣</li> <li><strong>框架机制认知</strong>：是否理解路由守卫等高级功能对应用架构的影响</li> </ol> <p>具体评估点：</p> <ul> <li>History API与浏览器导航的底层差异</li> <li>页面重载对SPA应用状态的影响</li> <li>路由守卫的执行机制与权限控制实现</li> <li>客户端路由与服务器端路由的协作原理</li> <li>浏览器历史记录管理的不同策略</li> </ul> <h3 id="技术解析">技术解析 <a href="#%e6%8a%80%e6%9c%af%e8%a7%a3%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><h4 id="关键知识点">关键知识点 <a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h4><ol> <li><strong>导航机制</strong>：History API vs 浏览器默认导航</li> <li><strong>渲染流程</strong>：DOM重建 vs 组件生命周期</li> <li><strong>控制能力</strong>：路由守卫 vs 无拦截机制</li> </ol> <h4 id="原理剖析">原理剖析 <a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h4><p>使用<code>location.href</code>时：</p> <div class="prism-codeblock "> <pre id="d94f42c" class="language-javascript "> <code>// 完整页面生命周期： 浏览器卸载当前文档 -&gt; 发起HTTP请求 -&gt; 解析新文档 -&gt; 重建DOM树 -&gt; 执行全局JS</code> </pre> </div> <p>触发行为：</p> <ul> <li>页面完全重载</li> <li>所有资源重新请求</li> <li>Vue应用实例被销毁</li> <li>内存状态完全丢失</li> </ul> <p>使用Vue Router跳转时：</p> <div class="prism-codeblock "> <pre id="f18214f" class="language-javascript "> <code>// SPA导航流程： router.push() -&gt; 调用History.pushState() -&gt; 触发popstate事件 -&gt; 执行路由守卫 -&gt; 加载异步组件 -&gt; 触发组件生命周期钩子</code> </pre> </div> <p>关键差异：</p> <ul> <li>仅替换DOM的指定区域（<code>&lt;router-view&gt;</code>）</li> <li>保持Vue实例和全局状态（Vuex）</li> <li>可插入权限验证逻辑（beforeEach）</li> <li>支持滚动行为控制</li> </ul> <h4 id="常见误区">常见误区 <a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h4><ol> <li>认为hash路由与history路由没有本质区别（实际存在URL美观性和SSR支持差异）</li> <li>误用<code>replaceState</code>导致浏览器历史记录异常</li> <li>在路由守卫中忘记调用<code>next()</code>导致导航挂起</li> </ol> <h3 id="问题解答">问题解答 <a href="#%e9%97%ae%e9%a2%98%e8%a7%a3%e7%ad%94" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><p>在Vue SPA中推荐使用路由跳转的核心原因在于：</p>