Vue两个路由组件生命周期钩子

已于 2023-05-11 20:03:54 修改
阅读量76 收藏
点赞数
分类专栏： Vue2 文章标签： vue.js 前端 javascript
于 2023-05-11 20:02:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YJH15888673903/article/details/130629342
版权

1.activated()

activated(){
    .....
}

activated()是当看见这个组件的时候，触发activated()生命周期钩子

2.deactivated()

deactivated(){
    .......
}

deactivated()是指这个组件在你可以看见他的时候后看不见这个组件了，就触发deactivated()生命周期钩子

阿Yao_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
10-18
主要介绍了详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue学习总结——Vue2生命周期
qq_53008257的博客
04-26 2507
Vue2生命周期 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。 vue中每一个组件都会创建一个vue实例，这个实例从出生到死亡，经历的过程如下（官网给出） 生命周期函数（也叫生命周期勾子），用于在Vue实例 创建的生命周期的不同阶段，执行业务逻辑 。Vue2有8个生命周期钩子，都是成对出现： 分别是
vue2 keep-alive无法触发activated
最新发布
WKJYC的博客
06-11 221
vue2 keealive失效
vue2 中activated和deactivated是详细解说
heihzi
10-18 1762
vue 中的 activater 的函数使用
VUE2中activated和created的使用区别
qq_45812595的博客
05-24 1631
与created钩子函数相比，activated钩子函数是在组件已经挂载渲染到页面上之后再被执行的，可以用于处理需要在组件显示后处理的逻辑。场景：跳转一个页面时，只有第一次执行了created，后边退出再次打开也不执行created，因为已经挂载完成了，可以使用activated钩子函数，这样每次进入页面都是被激活都会执行activated。总体来说，created钩子函数适合用来进行组件的初始化操作，而activated钩子函数适合处理组件被激活时的操作。需要根据具体的场景选择使用哪个钩子函数。
vue2.0 actived & deactive
周家大小姐
10-11 1936
actived :为激活实例方法 deactive:为失败后
Vue2 组件/实例的生命周期
qq_44621394的博客
08-28 384
Vue.js的核心就是以简洁的模板语法将数据渲染进Dom系统。读取数据和方法,设置数据绑定和监听解析template将实例挂载到Dom,并将实例状态和视图绑定在执行这些步骤的时候,vue还提供了一些生命周期的方法,用来在不同的阶段对代码做增添和修改。created阶段将数据和事件注入,并完成了数据观测,是最早可以获取和使用data、method的时候beforeMount阶段进行template的解析和渲染mounted阶段将实例注入dom,是最早可以操作dom的时候。...
解决vue多个路由共用一个页面的问题
08-27
解决 Vue 多个路由共用一个页面的问题可以使用 watch、computed 属性或生命周期钩子函数来监听路由变化，并重新加载数据。这种方法可以满足大多数业务需求，但是在页面结构变化很大的情况下，建议单独新建一个不同的...
Vue组件和Route的生命周期实例详解
11-27
在上述内容中，可以看到如何在`data`函数中初始化数据，以及如何利用路由生命周期钩子进行数据加载和用户验证。Vue.js的生命周期和路由管理让我们能精细地控制组件的行为，提高了应用的可维护性和用户体验。通过熟练...
解决Vue中的生命周期beforeDestory不触发的问题
10-15
为了解决这个问题，可以使用activated和deactivated生命周期钩子，这两个钩子分别在组件被激活和停用时调用，可以用来代替beforeDestroy进行相关的逻辑处理。 此外，文章还提到了关于使用Vue-resource进行HTTP请求...
vue生命周期的探索
10-17
在现代前端开发中，Vue.js作为一款流行的JavaScript框架，通过其特有的生命周期钩子函数，为开发者提供了一套全面的组件初始化和销毁流程管理机制。生命周期钩子是指在Vue实例或组件的特定生命周期阶段被自动调用的...
Vue生命周期(keep-alive缓存特殊activated(组件激活时)、deactivated(组件停用时))、父子组件的执行顺序
热门推荐
muzidigbig的博客
01-16 3万+
随着对 vue 的不断了解，会越来越发现它生命周期的重要性，只有了解了它的生命周期，才能在开发项目的时候在逻辑上的很好的判断什么时候该发生什么事件，即很好的控制页面。 一、什么是 vue 生命周期 Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。下面是官网中的生命周期照片 二、生命周期函数 Vue 的生命周期主要共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/
Vue2.0之生命周期created、mounted、activated区别
Stodger0216的博客
03-19 8022
created：在创建vue对象时，当html渲染之前就触发；但是注意，只会触发一次 mounted：是挂载vue实例后的钩子函数，钩子在主页挂载时执行一次，如果没有缓存的话，再次回到主页时，此函数还会执行 activated：是组件被激活后的钩子函数，每次回到页面都会执行 执行顺序：created => mounted =>activated ...
Vue2 与 Vue3 生命周期对比
青山不改，绿水长流。
09-22 3323
内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。这个钩子函数获取的数据是更新后的数据，生成新的虚拟dom，跟上一次的虚拟dom结构进行比较，比较出来差异（diff算法）后再渲染真实dom，当数据引发dom重新渲染的时候，在updated钩子函数里面就可以获取最新的真实dom了。vue 实例的 $el 和 data 都已初始化，dom节点马上要被渲染出来了，但是还没有真正的渲染出来,挂载之前为虚拟的 dom节点，模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。
vue actived生命周期---解决进入页面不会再次调用接口请求
iorn_mangg的博客
10-30 1万+
在vue实际项目中，很多时候会在mounted或者created请求数据接口然后渲染到页面上，但是这两个生命周期都是只会在第一次进入页面后执行，再次进入该页面时，由于vue-router的机制，会缓存已经加载过的页面数据这样会大大提高效率，所以我们使用$router.push等跳转操作时会发现已经在其他页面上修改的数据，跳转到这个页面，修改的数据并没有变化。 实际例子：a页面展示了一组数据，需要...
Vue中路由缓存及activated与deactivated的详解
zxdznyy的博客
02-09 3849
在Vue的使用中，为了提高应用的效率，我们可以使用路由缓存这方面的相关知识来解决遇到的问题。本博客的内容则是对路由缓存及activated与deactivated的详解。期望能对读者有所帮助。本篇博客需要有对路由相关知识的了解，如需复习可见博客Vue2路由的详细讲解。这里要介绍两个钩子函数（生命周期函数）：activated与deactivated。这两个是专门用于路由组件的函数。先介绍一下：activated，可译为”激活的“，路由组件从未出现到出现时运行。
vue：基础：生命周期
1363648943的专栏
09-05 2301
vue生命周期、勾子函数、data 传值、实例
Vue2教程详解四（生命周期）
一只努力搬砖的打工妹纸
01-27 2819
每个Vue实例在被创建时都要经过一系列的初始化过程----如，需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己代码的机会；生命周期又称生命周期回调函数、声明周期函数； 上一张官网的生命周期图示： 其中红字红框白底的内容为生命周期钩子，图中所示共有八个钩子（4对），分别是： beforeCreate---created，beforeMount---mounted，beforeUpdate---up
Vue2.动态组件，插槽，自定义指令
切图仔
04-25 3164
Vue2.动态组件，插槽，自定义指令
vue3 路由生命周期
08-09
Vue 3 中的路由生命周期与 Vue 2 中的路由生命周期有所不同。在 Vue 3 中，Vue Router 的生命周期钩子函数被移除了，取而代之的是使用组合式 API 来处理路由相关的逻辑。 在使用 Vue 3 + Vue Router 时，你可以使用 `useRoute` 和 `useRouter` 这两个核心函数来访问当前的路由信息和路由对象。 `useRoute` 函数返回当前路由的信息对象，你可以通过它获取当前路由的路径、参数、查询参数等信息。 `useRouter` 函数返回一个用于导航路由的对象，你可以使用它来进行编程式导航。 下面是一个简单的示例： ```javascript import { createRouter, createWebHistory } from 'vue-router' const router = createRouter({ history: createWebHistory(), routes: [...] }) // 在组件中使用 import { useRoute, useRouter } from 'vue-router' import { onBeforeRouteEnter, onBeforeRouteLeave } from 'vue-router' export default { setup() { const route = useRoute() const router = useRouter() onBeforeRouteEnter(() => { // 进入路由前的逻辑 }) onBeforeRouteLeave(() => { // 离开路由前的逻辑 }) return { route, router } } } ``` 通过上述示例，你可以在组件中使用 `useRoute` 和 `useRouter` 来获取路由信息和进行编程式导航，同时使用 `onBeforeRouteEnter` 和 `onBeforeRouteLeave` 来处理进入和离开路由前的逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值