vue路由中使用keep-alive 以及activated和deactivated 钩子
时间:2019-09-28
本文章向大家介绍vue路由中使用keep-alive 以及activated和deactivated 钩子,主要包括vue路由中使用keep-alive 以及activated和deactivated 钩子使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本次只是记录下开发中碰到的问题。
最近做一个活动页面,涉及到角色和权限的问题,需要跳转很多页面,于是vue-router走起,顺便keep-alive也用起来了,嗯,跳转的很爽,但是一个详情页面组件,被两个路由组件引用了,此时发现有一个路由在调用详情组件时没有按需求刷新,并且已经在keep-alive上设置了exclude,调试了半天不能解决问题,就用最笨的办法,把一个相同的页面写在两处,要求算是做完了,但是,看着这样的代码,总觉得不舒服,并且有改动的话要改两处,很容易遗漏,于是,研究了一下,之前也测试过,感觉就是是否新创建的问题 ,正好,看文档里面有 activated和deactivated两钩子。
说说我的总结吧:
在keep-alive组件中 在引用组件,并且通过props传值时,如果所传递的参数没有发生改变,那么子组件是不会更新的,并且,在子组件上可能还需要使用v-if来修饰,这样,就可以通过activated和deactivated这两 钩子来变化数据,
贴一下代码,相当于做个笔记
<template> <div class="my-family"v-if="team_id>0"> <FamilyItem :role="team_id" :team_id="team_id" :srouce="'other'"></FamilyItem> </div> </template> <script> import FamilyItem from './common/FamilyItem'; export default { name: "MyFamily", components:{ FamilyItem }, data(){ return{ role:-1, team_id:0 } }, /* computed:{ my_role(){ return store.role; }, my_team_id(){ return store.team_id; }, },*/ created() { console.log('进来执行了'); this.role=this.$route.params.role; this.team_id=this.$route.params.team_id; }, activated(){ this.role=this.$route.params.role; this.team_id=this.$route.params.team_id; console.log('activated进来了', this.role,this.team_id); }, deactivated(){ console.log('deactivated,,,清除'); this.role=-1; this.team_id=0; }, } </script>
原文地址:https://www.cnblogs.com/ysla/p/11605371.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Leetcode 面试题 01.06. 字符串压缩 (字符串模拟)
- Centos 7 安装 Git
- 受限平均生存时间(Restricted mean survival time)简析及R语言实现
- Leetcode 695. 岛屿的最大面积 (DFS)
- mskcc的vcf2maf极简解决方案代码分享
- 乘法逆元 线性递推阶乘求逆元、费马小定理、普适线性求逆元 欧拉定理结论
- 最新最全的varscan 软件找somatic mutation
- 【每周一库】- toml 一个toml文件解析库
- Rust FFI 编程 - bindgen 使用示例
- bug 回忆录(三)
- bug 回忆录(二)
- bug 回忆录(一)
- 曾经绊倒我的 “超级丑数”
- Flutter 完成全平台制霸:实现 Windows 应用支持
- 尤大 4 天前发在 GitHub 上的 vue-lit 是啥?