当前位置: 首页 > news >正文

点击router-link时候会发生什么?

当你点击链接或按钮时,将会导航到 User 组件,就会显示相应的用户 ID。

这里说一下执行流程,当点击一个 router-link 时,Vue Router会执行以下流程:

1)点击事件触发: 当你点击 router-link 组件时,会触发一个点击事件。

2)Vue Router 拦截: Vue Router会拦截这个点击事件,阻止浏览器默认的页面跳转。

3)解析目标路由: Vue Router会解析 router-linkto 属性,这个属性指定了目标路由的路径或命名路由。

4)匹配路由规则: Vue Router会将解析得到的目标路由与路由配置中的规则进行匹配,以确定最终前往哪个路由。

5)检查权限和执行钩子函数: 如果目标路由涉及到权限控制或使用了路由钩子函数(如 beforeEnter),Vue Router会依次执行这些操作,以决定是否允许导航。

6)执行路由跳转: 如果一切正常,Vue Router将根据匹配到的目标路由,执行页面的切换操作。

7)渲染组件: 目标路由的组件会被渲染到页面中。

8)执行生命周期钩子: 如果目标路由的组件定义了生命周期钩子函数(如 createdmounted 等),这些钩子函数将会依次被调用。

简而言之,点击一个 router-link 会触发Vue Router的导航流程,这个过程包括了路由匹配、权限验证、钩子函数的执行等一系列操作,最终将目标组件渲染到页面中。

http://www.lryc.cn/news/181500.html

相关文章:

  • 【Spring】@Bean方法中存在继承如何分析
  • 【Vim 插件管理器】Vim-plug和Vim-vbundle的区别
  • 电子计算机核心发展(继电器-真空管-晶体管)
  • SDI-12协议与STM32 进行uart通信
  • JS中的强制类型转换
  • WebSocket实战之四WSS配置
  • veImageX 演进之路:Web 图片加载提速50%
  • WebSocket实战之五JSR356
  • flask-sqlalchemy结合Blueprint遇到循环引入问题的解决方案
  • 05_对象性能模式
  • 快速选择排序
  • 国庆中秋特辑(六)大学生常见30道宝藏编程面试题
  • Centos7 安装mysql 8.0.34
  • 如何在 Google Earth 中创建轨迹、路线并制作动画
  • 蓝桥杯每日一题2023.9.30
  • springboot和vue:十、vue2和vue3的差异+组件间的传值
  • SQL:增、删、改、查 基本语句 Navicat建库(用法 + 例子)
  • vue-cli搭建过程(HBuilder X搭建)
  • MySQL索引:结构、语法、分类和优化
  • Vue中添加旋转动画
  • 基于SSM农产品商城系统
  • 基于matlab创作简易表白代码
  • pandas
  • 使用关键字interface来声明使用接口-PHP8知识详解
  • 计算机毕业设计 基于SSM的高校毕业论文管理系统小程序的设计与实现 Java实战项目 附源码+文档+视频讲解
  • 【Java 进阶篇】JDBC查询操作详解
  • 我的企业证书是正常的但是下载应用app到手机提示无法安装“app名字”无法安装此app,因为无法验证其完整性解决方案
  • 【数据结构】排序(2)—冒泡排序 快速排序
  • Redis与分布式-分布式锁
  • docker安装nginx详解