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>
vue路由中使用keep-alive 以及activated和deactivated 钩子的更多相关文章
- vue路由中 Navigating to current location ("/router") is not allowed
报错原因:多次点击同一路由,导致路由被多次添加 解决方法: router/index中添加以下代码: //router/index.js Vue.use(VueRouter) //导入vue路由 co ...
- vue路由中的 Meta
在项目中肯定有这样的需求,那就是在某个页面的时候,顶部展示 现在当前的页面路径,如下图: 这个在vue中其实很好实现. 首先出现这个肯定是相对应不同的页面,也就是说对应不同的路由,我们在定义路由的时候 ...
- 如何去掉vue路由中的#
通过脚手架vue-cli构建的项目,在项目启动后,URL地址上都会带有#,如:http://localhost:8080/#/father 原因:这是因为vue-router 默认hash模式, 使用 ...
- 3种vue路由传参的基本模式
路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便 ...
- vue 路由传参的三种基本模式
路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便 ...
- 简述在Vue脚手架中,组件以及父子组件(非父子组件)之间的传值
1.组件的定义 组成: template:包裹HTML模板片段(反映了数据与最终呈现给用户视图之间的映射关系) 只支持单个template标签: 支持lang配置多种模板语法: script:配置Vu ...
- Dynamic Route Matching Vue路由(1)
Dynamic Route Matching 动态的 路由 匹配 Very often we will need to map routes with the given pattern to the ...
- vue 项目中当访问路由不存在的时候默认访问404页面
前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...
- vue 路由meta作用及在路由中添加props作用
vue路由meta:有利于我们处理seo的东西,我们在html中加入meta标签,就是有利于处理seo的东西,搜索引擎 在路由中传参是通过/:id传参代码如下: import Login from ' ...
随机推荐
- INTERVIEW #5
笔试 150min,3题,每题100分,自己果然还是个蒟蒻呢~ 最近状态好差,虽然做了一些题,但还是考得稀烂,大概有几点需要加强: 独立做题,不要一边看板子一边写代码,更不要一开始就看题解: 对之前研 ...
- ACM-ICPC 2019 山东省省赛 M Sekiro
Sekiro: Shadows Die Twice is an action-adventure video game developed by FromSoftware and published ...
- Codeforce 1255 Round #601 (Div. 2)B. Fridge Lockers(思维)
Hanh lives in a shared apartment. There are nn people (including Hanh) living there, each has a priv ...
- ACM一年记,总结报告(希望自己可以走得很远)
一. 知识点梳理 (一) 先从工具STL说起: 容器学习了:stack,queue,priority_queue,set/multiset,map/multimap,vector. 1.stack: ...
- jdbc连接mysql数据库 (idea)
mysql我们已经不再陌生,但是通过Java来操作数据库的增删改查,我们就需要用到jdbc来连接: 我们使用idea来连接数据库,首先:我们电脑上需要安装idea和mysql,之后在网站上登录MySQ ...
- 面向开发者的Docker实践
show me the code and talk to me,做的出来更要说的明白 本文源码,请点击learnSpringboot 我是布尔bl,你的支持是我分享的动力! 一. 引入 有开发经验的都 ...
- Openwrt:添加"自定义软件包.ipk"
我们已经尝试做的一件事情,是让移植软件到OpenWrt的操作变得非常容易.如果打开OpenWrt里的一个软件包的目录(OpenWrt/Package/* 或 OpenWrt/feeds/package ...
- 设计模式GOF23之工厂模式01
简单工厂模式和工厂方法模式 工厂模式核心:分工 简单工厂模式不符合OCP(Open-Closed Princinple)原则,扩展时需要更改原代码 工厂方法模式增加了类复杂度代码复杂度等,所以一般使用 ...
- [NBUT 1224 Happiness Hotel 佩尔方程最小正整数解]连分数法解Pell方程
题意:求方程x2-Dy2=1的最小正整数解 思路:用连分数法解佩尔方程,关键是找出√d的连分数表示的循环节.具体过程参见:http://m.blog.csdn.net/blog/wh2124335/8 ...
- java套打
1:套打可能是以后软件开发可能会涉及到的功能,主要麻烦地方就是需要精确定位,光是打印发票还好,要是打印那种协议类型的特别麻烦,不仅长而且需要的数据多 ,定位麻烦. 2:而且大多数情况是需要去除页眉页脚 ...