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

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

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

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

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

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

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

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

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

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

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

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

相关推荐
用户461169657281 分钟前
网站 HTTPS 不稳定?证书排查指南
前端
n876513 分钟前
Playwright Java WEB UI 自动化实现框架与逻辑
java·前端·ui
keyipatience15 分钟前
TypeScript学习(1)
前端·javascript·学习·typescript·html·css3
xifangge202544 分钟前
基于 JavaScript 实现 CNC 数控切削参数与螺纹公差纯前端核算引擎
开发语言·前端·javascript
wangruofeng1 小时前
2026 Web 技术选型指南,AI 时代如何选择适合项目的技术栈
前端·aigc·ai编程
honkun61 小时前
vue 表格组件 vxe-table 修改滚动条样式,修改滚动条样式,统一宽度、颜色与自动隐藏
前端·javascript·vue.js
爱勇宝2 小时前
研究数字孪生的这半年,做了个 Demo,也有了一些新想法
前端·程序员
不可能片场2 小时前
工程实践 一个缓存把选片从十分钟压到一分钟
前端·electron
前端小万2 小时前
探索副业五个月,最终以放弃告终
前端·后端·面试
FRing032 小时前
JavaScript入门到精通二十四(正则表达式、元字符、修饰符)
开发语言·前端·javascript·正则表达式