vue的生命周期函数和vue-router中的路由钩子函数结构一览

最新推荐文章于 2023-03-31 18:16:14 发布
最新推荐文章于 2023-03-31 18:16:14 发布
阅读量124 收藏
点赞数
分类专栏： How about VUE 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39467105/article/details/127755108
版权
本文主要梳理了Vue的生命周期函数和vue-router的路由钩子函数，包括各自的结构和具体执行流程。在Vue中，从创建、挂载、更新到卸载的过程详细阐述了各个生命周期函数的执行顺序。而在vue-router中，重点讨论了组件守卫和全局守卫在路由跳转和参数变化时的行为。
摘要由CSDN通过智能技术生成

目录

最近感到对vue-router中路由跳转的钩子函数比较混乱。
稍微总结一下了相关的基本结构

Vue中的声明周期

结构

  • 创建
    • beforeCreate(){}
    • created(){}
  • 挂载
    • beforeMount()
    • mounted(){} 真正挂载
  • 更新
    • 数据触发重新渲染时，实时聊天
    • beforeUpdate(){} 更新前可以对组件进行控制
    • updated(){}
  • 卸载
    • beforeUnmounted
    • unmounted

具体执行

  • 除了没有创建的声明周期函数，其它的都有

  • 挂载

    • onBeforeMuont
    • onMounted

  • 更新

    • onBeforeUpdate
    • onUpdated

  • 卸载

    • onBeforeUnmounted
    • onUnmounted

创建过程，从外到内。挂载过程从内到外

vue-router中的路由跳转

结构

  • 组件守卫

    beforeRouteEnter		
beforeRou
最低0.47元/天 解锁文章
emVisible
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue-router相关知识笔记(包括三个生命周期钩子)
DespairA的博客
03-15 1729
目录 路由vue-router 1.简单介绍 2.使用路由 3.嵌套路由（多级路由） 4.命名路由 5.路由传参 6.props配置项 7.编程式路由导航 8.缓存路由 9.路由重定向 10.路由元信息 11.路由守卫（重点） 备注：遗留问题，props中params无法二次渲染（已解决） 路由vue-router 1.简单介绍 Vue Router 是Vue.js的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：...
Vue的生命周期函数和beforeRouteEnter()/beforeRouteLeave()的函数
dt1991524的博客
12-27 6029
用Vue开发了一个项目，虽然项目做完了，但心中却没有一个完整的知识体系，不能称之为会Vue，也许只能称之为了解，这段时间闲剩下来，找到Vue.js 的官网，简直了。。。简直都是自己陌生的各种语法函数，都怀疑自己是怎么做的项目啦！ 先参考vue官网从简单的看起！先了解下vue的生命周期。     也许我们从上图中并不能直观的看出生命周期中的函数的具体使命，先简短的用文字了解下： before...
Vue子路由怎么调用父路由中的方法和参数
一片天空
05-10 3133
问题:Vue中子路由怎么去调用父路由的方法和参数 思路: 直接在子路由的范围内使用this.$parent.xx即可调用对应父亲路由的参数。 使用this.$parent.xx()即可调用对应父亲路由的方法。 具体实现:直接贴入自己的测试页面就能看见效果了. <div id="app"> <router-link to="/son" tag="div"></router-link> <router-view></router-vi
vue中路由vue-router的使用和生命周期
weixin_41891519的博客
02-18 3586
vue-router Vue Router 是vue.js官方的路由管理器。它和vue.js的核心深度集成，让构建单页面应用变得易如反掌。 vue-router的使用 1.在项目src文件夹下新建名为router的文件夹 2.在router文件夹下新建index.js 3.在main.js中配置使用 vue-router跳转传参 1.query 2.params 3.采用url传参 vue-...
vue 路由跳转页面生命周期不执行的问题
Jovan的博客
01-12 2705
vue 路由跳转页面生命周期不执行的问题
vue教程——07 Vue生命周期和路由
Dormiveglia-flx的博客
12-23 1587
vue教程——08 Vue生命周期和路由一 vue生命周期二 vue路由 一 vue生命周期 大白话： beforeCreate( 创建前 )：此时vue刚实例化完，数据观测和事件配置还有被调用。此时组件的选项对象还未创建，el更没挂在。因此，这个时候无法访问methods， data， computed等上的方法和数据。 created ( 创建后 ）：在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el依然没有挂载。因此
vue-router的钩子函数用法实例分析
12-13
本文实例讲述了vue-router的钩子函数用法。分享给大家供大家参考，具体如下： vue路由钩子大致可以分为三类: 1.全局钩子 主要包括beforeEach和aftrEach, beforeEach函数有三个参数： to:router即将进入的路由对象 ...
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
10-18
本文将深入探讨Vue的钩子函数，特别是路由导航守卫和`keep-alive`组件，以及生命周期钩子。 首先，Vue的生命周期钩子是我们在组件创建、更新和销毁过程中可以利用的关键点。以下是一些常见的生命周期钩子： 1. `...
详解vue-router的导航钩子(导航守卫)
01-21
以下总结了路由钩子函数的使用方法和一些使用场景。 一、全局守卫 router.beforeEach 路由改变前的钩子 const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { ... ... }) 其中： to...
Vue-Router模式和钩子的用法
11-26
const router = new VueRouter({ 　mode: 'history', // 两种类型history 还有 hash routes: routes // 可以缩写成routes }) 有两种模式可供选择，history 和 hash，大致对比一下， 模式 优点 缺点 hash ...
vue-router在单文件组件中的生命周期
cc_chuan的博客
02-29 1619
vue-router在单文件组件中的生命周期 介绍： vue-router共有三个生命周期：beforeRouteEnter，beforeRouteUpdata，beforeRouteLeave。分别对应进入路由前，路由更新，离开当前路由。 钩子函数的参数 to：到哪里去。 from：从哪里来。 next：当这个函数执行时，表示继续执行下一步操作。不写会导致路由被拦截。 beforeRouteEn...
Vue生命周期函数
热门推荐
jerisem的博客
03-14 1万+
vue官方生命周期图示
Vue中的生命周期函数
最新发布
weixin_44244924的博客
03-31 73
vue 生命周期函数
Vue组件和Route的生命周期详解
huangpb的博客
12-04 4659
先讲点实际的 实用点的钩子： Created：vue实例被生成后的一个生命周期钩子函数。(页面初始化数据加载一般写这里); beforeCreate：给个loading界面 created撤销loading; beforeDestory：你确认删除XX吗？ destoryed：当前组件已被删除，清空相关内容 关于Vue组件生命周期，翻译后图示： m
vue-router 路由守卫（路由生命周期）
qq_41709082的博客
08-10 2452
vue-router 路由生命周期（路由守卫） 1.全局&路由 使用 beforeEach((to,from,next)=>{…}) 发生路由 跳转时 立即执行 router.beforeEach((to,from,next)=>{ console.log('跳转到',to); console.log('来源',from); console.log('全局前置路...
vue router生命周期
子敬的技术博客
04-24 8789
vue router生命周期 router中的参数 router异步解析执行，此时router在 resolve 完之前一直处于 等待中。 三个参数： to: Route: 即将要进入的目标 路由对象 from: Route: 当前导航正要离开的路由 next: Function: 一定要调用该方法来 resolve 这个钩子 组件中路由的生命周期中的不同方法...
vue-router路由切换 组件重用挖下的坑
踩坑小王子
01-23 1万+
问题描述：vue-router导航切换 时，如果两个路由都渲染同个组件，组件会重（chong）用,组件的生命周期钩子不会再被调用,使得组件的一些数据无法根据 path的改变得到更新 ************************************************************************************************************
vue-router深度解析：构建6个示例带你掌握路由切换
路由器提供了一些指令，如`v-link`，用于创建可点击的链接，以及一些全局和路由级别的钩子函数，如`beforeRouteEnter`、`beforeRouteLeave`等，可以在路由切换时执行特定逻辑。 接下来的示例将逐步增加复杂性，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值