本次只是记录下开发中碰到的问题。

最近做一个活动页面,涉及到角色和权限的问题,需要跳转很多页面,于是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 钩子的更多相关文章

  1. vue路由中 Navigating to current location ("/router") is not allowed

    报错原因:多次点击同一路由,导致路由被多次添加 解决方法: router/index中添加以下代码: //router/index.js Vue.use(VueRouter) //导入vue路由 co ...

  2. vue路由中的 Meta

    在项目中肯定有这样的需求,那就是在某个页面的时候,顶部展示 现在当前的页面路径,如下图: 这个在vue中其实很好实现. 首先出现这个肯定是相对应不同的页面,也就是说对应不同的路由,我们在定义路由的时候 ...

  3. 如何去掉vue路由中的#

    通过脚手架vue-cli构建的项目,在项目启动后,URL地址上都会带有#,如:http://localhost:8080/#/father 原因:这是因为vue-router 默认hash模式, 使用 ...

  4. 3种vue路由传参的基本模式

    路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便 ...

  5. vue 路由传参的三种基本模式

    路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便 ...

  6. 简述在Vue脚手架中,组件以及父子组件(非父子组件)之间的传值

    1.组件的定义 组成: template:包裹HTML模板片段(反映了数据与最终呈现给用户视图之间的映射关系) 只支持单个template标签: 支持lang配置多种模板语法: script:配置Vu ...

  7. Dynamic Route Matching Vue路由(1)

    Dynamic Route Matching 动态的 路由 匹配 Very often we will need to map routes with the given pattern to the ...

  8. vue 项目中当访问路由不存在的时候默认访问404页面

    前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...

  9. vue 路由meta作用及在路由中添加props作用

    vue路由meta:有利于我们处理seo的东西,我们在html中加入meta标签,就是有利于处理seo的东西,搜索引擎 在路由中传参是通过/:id传参代码如下: import Login from ' ...

随机推荐

  1. INTERVIEW #5

    笔试 150min,3题,每题100分,自己果然还是个蒟蒻呢~ 最近状态好差,虽然做了一些题,但还是考得稀烂,大概有几点需要加强: 独立做题,不要一边看板子一边写代码,更不要一开始就看题解: 对之前研 ...

  2. ACM-ICPC 2019 山东省省赛 M Sekiro

    Sekiro: Shadows Die Twice is an action-adventure video game developed by FromSoftware and published ...

  3. 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 ...

  4. ACM一年记,总结报告(希望自己可以走得很远)

    一. 知识点梳理 (一) 先从工具STL说起: 容器学习了:stack,queue,priority_queue,set/multiset,map/multimap,vector. 1.stack: ...

  5. jdbc连接mysql数据库 (idea)

    mysql我们已经不再陌生,但是通过Java来操作数据库的增删改查,我们就需要用到jdbc来连接: 我们使用idea来连接数据库,首先:我们电脑上需要安装idea和mysql,之后在网站上登录MySQ ...

  6. 面向开发者的Docker实践

    show me the code and talk to me,做的出来更要说的明白 本文源码,请点击learnSpringboot 我是布尔bl,你的支持是我分享的动力! 一. 引入 有开发经验的都 ...

  7. Openwrt:添加"自定义软件包.ipk"

    我们已经尝试做的一件事情,是让移植软件到OpenWrt的操作变得非常容易.如果打开OpenWrt里的一个软件包的目录(OpenWrt/Package/* 或 OpenWrt/feeds/package ...

  8. 设计模式GOF23之工厂模式01

    简单工厂模式和工厂方法模式 工厂模式核心:分工 简单工厂模式不符合OCP(Open-Closed Princinple)原则,扩展时需要更改原代码 工厂方法模式增加了类复杂度代码复杂度等,所以一般使用 ...

  9. [NBUT 1224 Happiness Hotel 佩尔方程最小正整数解]连分数法解Pell方程

    题意:求方程x2-Dy2=1的最小正整数解 思路:用连分数法解佩尔方程,关键是找出√d的连分数表示的循环节.具体过程参见:http://m.blog.csdn.net/blog/wh2124335/8 ...

  10. java套打

    1:套打可能是以后软件开发可能会涉及到的功能,主要麻烦地方就是需要精确定位,光是打印发票还好,要是打印那种协议类型的特别麻烦,不仅长而且需要的数据多 ,定位麻烦. 2:而且大多数情况是需要去除页眉页脚 ...