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

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

相关文章
|
API
vue3.0 router路由跳转传参(router.push)
vue3.0 router路由跳转传参(router.push)
906 0
|
23天前
|
前端开发 JavaScript UED
react-router 里的 Link 标签和 a 标签有什么区别
`react-router` 中的 `Link` 标签与 HTML 中的 `a` 标签的主要区别在于:`Link` 是专门为 React 应用设计的,用于实现客户端路由导航,不会触发页面的重新加载,而 `a` 标签则会刷新整个页面。使用 `Link` 可以提升应用的性能和用户体验。
|
3月前
|
JavaScript
Vue中router路由的使用、router-link的使用(在项目中的实际运用方式)
这篇文章介绍了Vue中router路由和router-link的使用方式,包括router配置、router-link在模板中的使用,以及实现的导航菜单和页面路由效果。
Vue中router路由的使用、router-link的使用(在项目中的实际运用方式)
路由不跳转,只留在首页,写的样式写到了App.vue中,没使用router-view
路由不跳转,只留在首页,写的样式写到了App.vue中,没使用router-view
路由不跳转,只留在首页,写的样式写到了App.vue中,没使用router-view
路由不跳转,常见流程-----ElementPlus如何点击某页跳转页,el-menu中必须加上router=“true“,否则不跳转,index写完成路由路径就行,后面的router也写完整的
路由不跳转,常见流程-----ElementPlus如何点击某页跳转页,el-menu中必须加上router=“true“,否则不跳转,index写完成路由路径就行,后面的router也写完整的
|
6月前
|
API
uView route 路由跳转
uView route 路由跳转
106 0
|
人工智能 自然语言处理 JavaScript
vue中页面(路由)跳转及传值的几种方式 router-link + query + params
vue中页面(路由)跳转及传值的几种方式 router-link + query + params
144 0
|
JavaScript
Vue Router 学习 router-view页面存在多个
Vue Router 学习 router-view页面存在多个
124 0
|
存储 SQL 缓存
一看就会的Next.js App Router版 -- Routing(上)(一)
一看就会的Next.js App Router版 -- Routing
1002 1
|
缓存 Dart JavaScript
一看就会的Next.js App Router版 -- Routing(下)(二)
一看就会的Next.js App Router版 -- Routing
756 0
一看就会的Next.js App Router版 -- Routing(下)(二)