Vue-router 跳转和 location.href 有什么区别？

南星媛
522 阅读2分钟

功能差异

  • Vue-Router 工作模式主要分为两种, 一种就是history模式, 一种就是hash模式。
    1. history 模式使用 pushState(/url) 进行路由更新，支持静态跳转，页面不会重新加载。
    2. 利用 diff 算法实现按需加载，减少 DOM 操作，适用于路由跳转或同一页面跳转。
    3. 支持异步加载，例如，使用 this.$nextTick() 在跳转后获取新的 URL 。
  • location.href=/url
    1. 直接设置新的 URL ，触发页面重新加载。
    2. 适用于不同页面间的跳转，不涉及路由管理。

性能对比

  • Vue-Router
    1. 由于使用 pushState 和 diff 算法，减少了不必要的 DOM 操作，提高了页面响应速度。
    2. 支持在同一页面内进行平滑跳转，减少了重定向的开销。
  • location.href
    1. 每次跳转都会导致页面重新加载，若频繁跳转时会影响性能。
    2. 运用于简单的页面跳转，不涉及复杂的路由逻辑。

结论

Vue-Router 提供了更高级灵活的跳转功能，无刷新页面。静态跳转。特别适合需要处理复杂路由和频繁页面跳转的场景。

location.href 会刷新页面，适用于简单的页面间跳转。

Vue-Router两种模式

  • hash模式

    在 URL 中使用 # 符号来模拟路由状态的改变。当 URL 中的 # 后面的部分发生变化时，浏览器不会向服务器发送请求，而是触发 hashchange 事件，Vue Router 监听这个事件来更新页面。

  • history模式

    主要通过 HTML5 提供的 History API 来实现路由切换，不再使用 # 符号。当用户点击链接时，浏览器向服务器发送请求，服务器根据请求的 URL 返回相应的页面。前端通过 History API 的 pushState() 和 replaceState() 方法来改变 URL，但不向服务器发送请求。

两种模的优缺点

  • history模式

    优点主要是 url 没有 #, 相对来说比较美观。 缺点是上线后需要服务端配合我们处理路径, 否则的话刷新会有 404。

    在 Vue2 中, 我们只需要配置一下 mode: 'history' 即可。

    在 Vue3 中, 需要我们从 Vue-Router 中引出一个createWebHistory, 在创建路由器的时候, 指定 history: createWebHistory()。

image.png

我们看一下, 我们切换的时候, 是不带 # 的： e4b116cda9cc6c099b268711ee5744b0.png

  • hash模式

    优点就是兼容性会比较好, 项目上线, 也不再需要服务端处理路径问题。 缺点就是带有 # , 不是很美观, 在 SEO 优化方面相对较差。

我们来写一个哈希模式看一下

需要从 Vue-Router 中引出一个 createWebHashHistory。

image.png

重新启动项目, 看看路径的变化。

image.png

参考原文: mp.weixin.qq.com/s/wrGszdbML…

avatar
文章
阅读
粉丝