Vue 3 路由

更新时间 2023-11-28 22:31:32

一则或许对你有用的小广告

欢迎加入小哈的星球 ,你将获得:专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书活动

目前, 星球 内第一个项目:全栈前后端分离博客项目,演示地址:http://116.62.199.48/, 1.0 版本已经更新完毕,正在更新 2.0 版本。采用技术栈 Spring Boot + Mybatis Plus + Vue 3.x + Vite 4手把手,前端 + 后端全栈开发,从 0 到 1 讲解每个功能点开发步骤,1v1 答疑,陪伴式直到项目上线,目前已更新了 224 小节,累计 35w+ 字,讲解图:1544 张,还在持续爆肝中,后续还会上新更多项目,目标是将 Java 领域典型的项目都整上,如秒杀系统、在线商城、IM 即时通讯、权限管理等等,已有 1000+ 小伙伴加入,欢迎点击围观

在现代 Web 应用开发中,前端路由是一项至关重要的技术。它使得用户在应用中进行导航、切换视图变得更加流畅和高效。本章节中,我们就来学习一下 Vue 官方提供的路由管理器 —— Vue Router。

什么是前端路由?

在传统的多页应用(MPA)中,用户在浏览器中输入 URL 或者点击链接时,比如访问 www.quanxiaoha.com , Web 服务器便会返回一个 HTML 页面。这种方式下,用户每次与应用交互时都需要从服务器加载新的页面,这样可能导致用户体验较差,因为页面切换时可能会有延迟。

多页应用(MPA)多页应用(MPA)

而前端路由的核心思想是将页面的导航和视图切换移到了客户端(浏览器)中完成。在单页应用(SPA)中,当应用被第一次被访问时,就加载了需要的多少有的 HTMLJavaScriptCSS (所以第一次访问速度较慢)。但是,在后续中用户与应用交互过程中,前端路由会通过 JavaScript 来改变当前的视图,而不需要向服务器请求新的页面、js, 以及 css 文件。这样,用户在应用中导航和切换视图会变得非常迅速,因为所有的操作都在客户端内完成,不需要再次向服务器请求资源。

为什么要使用前端路由?

  • 提升用户体验:前端路由使得用户在应用中的导航更加迅速,不需要等待页面加载,从而提升了用户的体验。页面间的切换变得瞬间完成,用户不再感受到页面加载的延迟;
  • 减轻服务器压力:在传统的多页应用中,每次页面切换都需要向服务器请求新的页面,服务器需要处理这些请求,返回相应的 HTML。而在单页应用中,前端路由通过 JavaScript 动态地更新视图,不需要再向服务器请求 HTML 页面,这样大大减轻了服务器的压力;
  • 更好的组织与管理:前端路由可以将应用拆分为多个视图,每个视图对应一个路由。这种组织方式使得项目结构更加清晰,易于维护和扩展。每个路由可以与特定的组件相对应,使得代码更加模块化、可维护性更高。

Vue Router 路由

Vue Router 官网Vue Router 官网

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。功能包括:

  • 嵌套路由映射
  • 动态路由选择
  • 模块化、基于组件的路由配置
  • 路由参数、查询、通配符
  • 展示由 Vue.js 的过渡系统提供的过渡效果
  • 细致的导航控制
  • 自动激活 CSS 类的链接
  • HTML5 history 模式或 hash 模式
  • 可定制的滚动行为
  • URL 的正确编码

结语

总的来说,Vue 路由不仅提供了强大的功能,还与 Vue 框架深度集成,使得前端路由的使用变得非常简单。在现代 Web 应用的开发中,使用 Vue 路由能够极大地提升用户体验,减轻服务器压力,并且更好地组织和管理项目代码。