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

相关推荐
WHOAMI_老猫1 小时前
XSS-LABS靶场通关讲解
前端·xss
要加油哦~1 小时前
前端 | 向后端传数据,判断问题所在的调试过程
前端·javascript·vue.js
中工钱袋3 小时前
Vue 中地址栏参数与 HTTP 请求参数的同步问题
前端·vue.js·http
一只月月鸟呀3 小时前
Vue 过滤器 filter(s) 的使用
javascript·vue.js·ecmascript
zzlyx993 小时前
设备管理系统功能与.NET+VUE(IVIEW)技术实现
前端·vue.js·view design
秋月华星5 小时前
【flutter】TextField输入框工具栏文本为英文解决(不用安装插件版本
前端·javascript·flutter
—Qeyser6 小时前
用Deepseek写一个 HTML 和 JavaScript 实现一个简单的飞机游戏
javascript·游戏·html
千里码aicood6 小时前
[含文档+PPT+源码等]精品基于Python实现的校园小助手小程序的设计与实现
开发语言·前端·python
青红光硫化黑6 小时前
React基础之React.memo
前端·javascript·react.js
大麦大麦6 小时前
深入剖析 Sass:从基础到进阶的 CSS 预处理器应用指南
开发语言·前端·css·面试·rust·uni-app·sass