深入理解 Vue Router:构建可靠的前端路由系统

这篇具有很好参考价值的文章主要介绍了深入理解 Vue Router:构建可靠的前端路由系统。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

01-什么是前端路由以及路由两种模式实现原理

  • 前端路由是指在单页应用(SPA,Single Page Application)中,通过客户端的路由机制实现页面切换和导航的方式。它将不同的 URL 映射到相应的组件或页面,并通过页面切换而无需重新加载整个页面。
  • 前端路由的特点包括:
    1. 基于 URL:前端路由使用 URL 来标识不同的页面或视图状态。每个页面或视图状态都有一个对应的 URL,用户可以通过修改 URL 来导航到不同的页面或视图。

    2. 单页应用:前端路由通常用于单页应用。在单页应用中,所有的页面内容都加载一次,之后的页面切换只是替换了相应的组件或视图内容,而不需要重新加载整个页面,提供了更流畅的用户体验。

    3. 前端控制:前端路由是在客户端控制的。它通过 JavaScript 来监听 URL 的变化,并根据 URL 的不同来渲染相应的组件或视图内容,实现页面切换和导航。

    4. 动态加载:前端路由可以动态加载所需的组件或视图。当用户访问一个新页面时,路由系统会根据配置动态地加载对应的组件代码,从而避免了一次性加载所有页面内容带来的性能消耗。

    5. 无需刷新:前端路由通过动态地替换组件或视图内容来实现页面切换,从而避免了整个页面的刷新。这不仅提高了页面加载速度,还能保持用户在切换页面时的当前状态,提供更好的用户体验。

02-路由的基本搭建与嵌套路由模式

  • vue路由的搭建

    npm install vue-router
    
    • 配置路由信息,并且与Vue进行结合,让路由插件生效。在/src/router/index.js创建配置文件:
      深入理解 Vue Router:构建可靠的前端路由系统,前端,前端,vue.js,javascript
  • vue路由的应用
    深入理解 Vue Router:构建可靠的前端路由系统,前端,前端,vue.js,javascript

  • 嵌套路由模式
    深入理解 Vue Router:构建可靠的前端路由系统,前端,前端,vue.js,javascript

03-动态路由模式与编程式路由模式

  • 动态路由模式
    • 所谓的动态路由其实就是不同的URL可以对应同一个页面,这种动态路由一般URL还是有规律可循的,所以非常适合做类似于详情页的功能。
      深入理解 Vue Router:构建可靠的前端路由系统,前端,前端,vue.js,javascript
      深入理解 Vue Router:构建可靠的前端路由系统,前端,前端,vue.js,javascript
  • 编程式路由
    • 在JavaScript中通过逻辑的方式进行路由跳转 深入理解 Vue Router:构建可靠的前端路由系统,前端,前端,vue.js,javascript

04-命名路由与命名视图与路由元信息

  • 命名路由

    • 在路由跳转中,除了path 之外,你还可以为任何路由提供name的形式进行路由跳转:
      • 没有硬编码的 URL
      • params 的自动编码/解码
      • 防止你在 url 中出现打字错误
      • 绕过路径排序(如显示一个)
        深入理解 Vue Router:构建可靠的前端路由系统,前端,前端,vue.js,javascript
  • 命名视图

    • 有时候想同时 (同级) 展示多个视图,而不是嵌套展示,这个时候就非常适合使用命名视图。
      深入理解 Vue Router:构建可靠的前端路由系统,前端,前端,vue.js,javascript
  • 路由元信息

    • 有时,你可能希望将任意信息附加到路由上,如过渡名称、谁可以访问路由等。这些事情可以通过接收属性对象的meta属性来实现。
      深入理解 Vue Router:构建可靠的前端路由系统,前端,前端,vue.js,javascript

05-路由传递参数的多种方式及应用场景

  • 路由的传递参数主要有以下三种方式:

    • query方式(显示) -> $route.query
    • params方式(显示) -> $route.params
    • params方式(隐式) -> $route.params
  • 两种显示传递数据的差异点主要为:

    • query是携带辅助信息
    • params是界面的差异化
      深入理解 Vue Router:构建可靠的前端路由系统,前端,前端,vue.js,javascript
    • 注意:隐式发送过来的数据,只是临时性获取的,一旦刷新页面,隐藏的数据就会消失。

06-详解route对象与router对象

  • route对象用来获取路由信息,是针对获取操作的,主要是操作当前路由的。

    • route对象具体功能如下:(主要是一些路由信息)

      • fullPath
      • hash
      • href
      • matched
      • meta
      • name
      • params
      • path
      • query
  • router对象用来调用路由方法,是针对设置操作的,主要是操作整个路由系统对应的功能.

    • router对象具体功能如下:(主要是一些方法)

      • addRoute
      • afterEach
      • back
      • beforeEach
      • beforeResolve
      • currentRoute
      • forward
      • getRoutes
      • go
      • hasRoute
      • push
      • removeRoute

07-路由守卫详解及应用场景

  • vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航
    • 进入到指定路由前做一个拦截,看一下我们是否具备权限,如果有权限就直接进入,如果没权限就跳转到其他页面。
  • 路由守卫分类
    • 全局环境的守卫beforEach
      深入理解 Vue Router:构建可靠的前端路由系统,前端,前端,vue.js,javascript

    • 路由独享的守卫beforeEnter
      深入理解 Vue Router:构建可靠的前端路由系统,前端,前端,vue.js,javascript

    • 组件内的守卫beforeRouteEnter
      深入理解 Vue Router:构建可靠的前端路由系统,前端,前端,vue.js,javascript文章来源地址https://www.toymoban.com/news/detail-678509.html

  • 完整的导航解析流程
    1. 导航被触发。
    2. 在失活的组件里调用 beforeRouteLeave 守卫。
    3. 调用全局的 beforeEach 守卫。
    4. 在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。
    5. 在路由配置里调用beforeEnter
    6. 解析异步路由组件。
    7. 在被激活的组件里调用 beforeRouteEnter。
    8. 调用全局的 beforeResolve 守卫(2.5+)。
    9. 导航被确认。
    10. 调用全局的 afterEach 钩子。
    11. 触发 DOM 更新。
    12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入

到了这里,关于深入理解 Vue Router:构建可靠的前端路由系统的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端面经】Vue-Vue Router 路由有哪些模式?各模式有什么区别?

    Vue Router 是一个轻量级的前端路由库,它提供了三种路由模式,每种模式都适用于不同的场景。本文将详细介绍这三种模式的优缺点和适用场景,以便读者在使用 Vue Router 时进行选择。 在 hash 模式下,URL 中的 hash 值作为路由路径。该模式可以兼容较老的浏览器,并且无需后端

    2024年02月03日
    浏览(39)
  • 基于vscode开发vue3项目的详细步骤教程 3 前端路由vue-router

    1、Vue下载安装步骤的详细教程(亲测有效) 1_水w的博客-CSDN博客 2、Vue下载安装步骤的详细教程(亲测有效) 2 安装与创建默认项目_水w的博客-CSDN博客 3、基于vscode开发vue项目的详细步骤教程_水w的博客-CSDN博客 4、基于vscode开发vue项目的详细步骤教程 2 第三方图标库FontAwesome_水w的

    2024年02月02日
    浏览(69)
  • Vue前端 更具router.js 中的meta的roles实现路由卫士,实现权限判断。

    参考了之篇文章 1、我在登陆时获取到登录用户的角色名roles,并存入sessionStorage中,具体是在login页面实现,还是在menu页面实现都可以。在menu页面实现,可以显得登陆快一些。 2、编写router.js,注意,一个用户可能有多个角色。 这里有个bug 我们的roles存在sessionStorage中,关闭

    2024年02月13日
    浏览(44)
  • Vue3+Vue-Router+Element-Plus根据后端数据实现前端动态路由——权限管理模块

    提示:文章内容仔细看一些,或者直接粘贴复制,效果满满 提示:文章大概 1、项目:前后端分离 2、前端:基于Vite创建的Vue3项目 3、后端:没有,模拟的后端数据 4、关于路径“@”符号——vite.config.js 文件里修改 提示:以下是本篇文章正文内容,下面案例可供复制粘贴使用

    2024年02月02日
    浏览(57)
  • Vue入门六(前端路由的概念与原理|Vue-router简单使用|登录跳转案例|scoped样式|混入(mixin)|插件)

    路由(英文:router)就是对应关系 SPA指的是一个web网站只有一个唯一的一个HTML页面, 所有组件的展示与切换 都在唯一的一个页面内完成。 此时, 不同组件之间的切换 需要通过 前端路由 来实现 总结:在SPA项目中, 不同功能之间的切换 ,要 依赖于前端路由 来完成 通俗移动

    2024年01月22日
    浏览(46)
  • vue3 一个基于pinia简单易懂的系统权限管理实现方案,vue-router动态路由异步问题解决

    作为项目经验稀少的vue开发者来说,在关键技术点上的经验不多,我希望通过我的思想和实践,把好的东西分享在这里,目的是进一步促进技术交流。项目即将完成,权限是最后的收尾工作,好的权限实现方案,可以让我们没有后顾之忧,也可以提升项目的运行速度。 在开发

    2023年04月08日
    浏览(53)
  • 【退役之重学前端】使用vite+vue3+vue-router,重构react+react-router前后端分离的商城后台管理系统

    前言: 对前端各个技术板块,HTML、CSS、JavaScript、ES6、vue家族,整体上能“摸其大概”。笔者计划重构一个基于react的商城后台管理系统。 —— 2024年2月16日 vue3 sass bootstrap ES7 前后端分离 分层架构 模块化开发 npm vite git

    2024年02月20日
    浏览(55)
  • 深入理解TCP三次握手:连接可靠性与安全风险

    导言 TCP简介和工作原理的回顾 TCP三次握手的目的和步骤 TCP三次握手过程中可能出现的问题和安全风险 为什么TCP三次握手是必要的? 是否可以增加或减少三次握手的次数? TCP四次挥手与三次握手的异同点         在网络通信中,TCP(Transmission Control Protocol)作为一种可靠

    2024年02月14日
    浏览(38)
  • Vue Router相关理解2

    路由的query参数 传递参数 冒号to先转换成js语句,然后再使用模板字符串  接收参数 案例 src/router/index.js src/pages/Message.vue src/pages/Detail.vue 命名路由 作用:可以简化路由的跳转 src/router/index.js src/pages/Message.vue params参数 src/router/index.js src/pages/Detail.vue src/pages/Message.vue 特别注意:

    2024年02月17日
    浏览(40)
  • vue Router路由

    是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。功能包括: 嵌套路由映射 动态路由选择 模块化、基于组件的路由配置 路由参数、查询、通配符 展示由 Vue.js 的过渡系统提供的过渡效果 细致的导航控制 自动激活 CSS 类的链接 HTML5 his

    2024年02月07日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包