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

时间: 2024-11-11 17:24:14

vue路由中使用keep-alive 以及activated和deactivated 钩子的相关文章

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

路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取对应li的数据,显示相应的正确的内容. 父组件中: <li v-for="article in articles" @click="getDescribe(article.id)"> 方案一: getDescribe(id) { // 直接调用$

如何在Vue项目中给路由跳转加上进度条

1.前言 在平常浏览网页时,我们会注意到在有的网站中,当点击页面中的链接进行路由跳转时,页面顶部会有一个进度条,用来标示页面跳转的进度(如下图所示).虽然实际用处不大,但是对用户来说,有个进度条会大大减轻用户的等待压力,提升用户体验.本篇文章就来教你如何在Vue项目中实现这样的进度条. 2.安装Nprogress 虽然我们也可以自己手动实现这样的功能,但是,nprogress.js已经帮我们把进度条的样式呀,功能呀都已经封装的很好了,既然有现成的轮子,我们就直接使用轮子就好啦! npm inst

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

前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在最后添加一个path: * ,优先级从上到下查找路由,都没有的时候全部指向 404页面 ,代码如下: const baseRoute = [ { path: '/login', name: 'login', component: Login }, {path: '/', redirect: '/in

Vue.js 中的动态路由

静态路由是不可以传递参数的.需要传递参数得用到动态路由 那么如何将参数作为路由呢? //在参数名前面加上 : ,然后将参数写在路由的 path 内 routes: [ //将页面组件与path指令的路由关联 { name: 'BookInfo', path: '/books/:id', component: BookInfo} ] 这样定义之后,vue-router就会匹配所有的:/books/1,/books/2,/books/3 --,所以说这样定义的路由的数量是不确定的. 在<router

Vue知识点-改变路由的哈希模式(去掉路由中的#)

1.改变路由的哈希模式(在路由中会出现#): 在src/router/index.js中 创建路由对象: const routes = [ {path:"",redirect:"/home"}, {path:"/home",component:Home}, {path:"/cart",comsponent:Cart}, {path:"/profile",component:Profile}, {path:&

vue路由

ue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 本文将以示例的形式来介绍vue-router的各个特性,一共包含6个示例,每个示例都有乞丐版,前5个示例有皇帝版.乞丐版是将所有代码混杂在一起的HTML页面,皇帝版是基于vue-web

初印象至Vue路由

初印象系列为快速了解一门技术的内容,后续会推出本人应用这门技术时发现的一些认识. Vue路由和传统路由的区别: Vue路由主要是用来实现单页面应用内各个组件之间的切换,同样支持传递参数等功能.而传统路由使用超链接 以下内容来自官网,js使用ES6 如何在vue项目中使用vue-router HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="htt

Vue - 路由传递参数

Vue 2.0  路由传递参数 Vue 路由传递参数 有两种方式: 一.用name传递参数 两步完成用name传值并显示在模板里: 在路由文件src/router/index.js里配置name属性. 1 2 3 4 5 6 7 routes: [ { path: '/', name: 'Hello', component: Hello } ] 模板里(src/App.vue)用$router.name的形势接收,比如直接在模板中显示: 1 <p>{{ $route.name}}</p&

Vue路由跳转问题记录

最近项目上需要用Vue用来做app,在Vue中使用路由时遇到下面的问题. 路由设置如下: { path:'/tab', component:Tab, children:[{ path:'layoutList', name:'LayoutList', component:LayoutList },{ path:'layoutView/:layoutId', name:'LayoutView', component:LayoutView },{ path:'layoutDetail/:viewId'