点击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的导航流程,这个过程包括了路由匹配、权限验证、钩子函数的执行等一系列操作,最终将目标组件渲染到页面中。

相关推荐
前端工作日常8 分钟前
我学习到的AG-UI的概念
前端
韩师傅13 分钟前
前端开发消亡史:AI也无法掩盖没有设计创造力的真相
前端·人工智能·后端
XiaoYu200227 分钟前
第12章 支付宝SDK
前端
双向331 小时前
RAG的下一站:检索增强生成如何重塑企业知识中枢?
前端
拖拉斯旋风1 小时前
从零开始:使用 Ollama 在本地部署开源大模型并集成到 React 应用
前端·javascript·ollama
asing1 小时前
🤯 为什么我的收银台在鸿蒙系统“第一次返回”死活拦不住?一次差点背锅的排查实录
前端·harmonyos
德育处主任1 小时前
『NAS』在群晖部署图片压缩工具-Squoosh
前端·javascript·docker
Hao_Harrision1 小时前
50天50个小项目 (React19 + Tailwindcss V4) ✨| ThreeDBackgroundBoxes(3D背景盒子组件)
前端·3d·typescript·react·tailwindcss·vite7
加个鸡腿儿1 小时前
经验分享2:SSR 项目中响应式组件的闪动陷阱与修复实践
前端·css·架构
心.c1 小时前
如何基于 RAG 技术,搭建一个专属的智能 Agent 平台
开发语言·前端·vue.js