vue之keep-alive

news/2024/7/9 23:54:41 标签: vue

在home首页

<template>
  <div>
    首页
    <router-link to="/list">跳转列表</router-link>
  </div>
</template>
<script>
export default {};
</script>
<style lang="less" scoped></style>

商品列表

<template>
  <div>
    列表
    <router-link to="/detail">跳转详情</router-link><br />
    <router-link to="/home">跳转首页</router-link>
    <p>{{ msg }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: '默认的数据',
    };
  },
  created() {
    console.log('created装状态');

    
  },
  methods: {
    getNewData(a) {
      this.msg = a;
    },
  },

  beforeRouteEnter: (to, from, next) => {
    if (from.name === 'detail') {
      to.meta.isBack = true;
      to.meta.keepAlive = true;
    }
    next();
  },
  activated() {
    console.log('激活状态');

    if (!this.$route.meta.isBack) {
      this.getNewData('主页进入的新数据');
    }
    this.$route.meta.isBack = false;
  },
};
</script>
<style lang="less" scoped></style>

商品详情

<template>
  <div>
    详情
    <router-link to="/list">跳转列表</router-link><br />
    <router-link to="/home">跳转首页</router-link>
  </div>
</template>
<script>
export default {};
</script>
<style lang="less" scoped></style>

router.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../components/home.vue';
import Detail from '../components/detail.vue';
import List from '../components/list.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    redirect: '/home',
    meta: {
      keepAlive: false,
    },
  },
  {
    path: '/home',
    component: Home,
    name: 'home',
    meta: {
      keepAlive: false,
    },
  },
  {
    path: '/list',
    component: List,
    name: 'list',

    meta: {
      keepAlive: true,
      isBack: false,
    },
  },
  {
    path: '/detail',
    component: Detail,
    name: 'detail',
  },
];

const router = new VueRouter({
  routes,
});

export default router;

总结:首次从首页进入列表页面先created再activated,之后任何页面进入到list页面后created都不会执行 只会执行activated,所以需要在activated进行获取新数据


http://www.niftyadmin.cn/n/1206109.html

相关文章

linux环境下给python添加tab自动补齐

Pthon开发环境有很多种&#xff0c;可以使用IDE环境&#xff0c;比如eclipse&#xff0c;charm。也可以在linux下使用ipython&#xff0c;使用ipython就是因为有自动补全功能。当然也可以在linux环境下使用原生的python添加Tab补齐&#xff0c;也就实现了ipython的功能。只需要…

RPA开发前景

在2019年RPA借着人工智能的东风一路正向发展&#xff0c;得到了越来越多企业的持续关注&#xff0c;并顺利走向爆发期。在短短几年时间内&#xff0c;RPA几乎已经被全球采纳&#xff0c;并且一些中小型企业对RPA也产生了浓厚的兴趣。当前RPA市场的火热&#xff0c;绝非偶然。资…

【Mybaits学习】04_ 优化调试信息(log4j)

1、增加Log4j Jar包 <!-- https://mvnrepository.com/artifact/log4j/log4j --><dependency><groupId>log4j</groupId><artifactId>log4j</artifactId><version>1.2.17</version></dependency> 2、新建以及配置log4j文件…

RPA工程师的前景

有数据显示,目前RPA市场每年的增速都超过100%。乐观估计,全球RPA市场规模未来5年可能会增长至超过1000亿美元,HfS Research、Zinnov、毕马威等机构都给出了相对积极的市场预期。回望国内,RPA市场近年来的增速也均超过100%,发展预期亦较为乐观。一些RPA公司已经完成或即将完成融…

使用privide/inject和this.$refs/this.$root进行通信

介绍 通常在vue中我们会经常使用到一些组件间的通信方法&#xff0c;比如父-子、子-父、兄弟、vue-bus、vuex等&#xff0c;那么除了这些还有没有其他的通信方式呢。当然&#xff0c;今儿我就找到了另外的两种方法&#xff0c;privide/inject和this.$ refs / this.$ root 注意…

js焦点轮播图

汇集网上焦点轮播图的实现方式&#xff0c;自己试了下&#xff0c;不过鼠标悬浮停止动画和鼠标离开动画播放好像没生效&#xff0c;不太明白&#xff0c;最后两行代码中&#xff0c;为什么可以直接写stop和play。不用加括号调用函数么&#xff1f;求懂的大神指点&#xff01; 所…

RPA之家UiPath视频教程

【RPA之家】UiPath Studio下载安装和激活 https://www.bilibili.com/video/BV18J411H7K7 【RPA之家】UiPath变量的介绍和使用 https://www.bilibili.com/video/BV18J411H7gy 【RPA之家】UiPath第一个案例HelloWorld https://www.bilibili.com/video/BV18J411H7Vp 【RPA之家】Ui…

Vim常用的总结

地址定界遵循正则表达式。1、HJKL上下左右移动2、I插入3、ZZ保存退出4、w /PATH/TO/SOMEFIEL 保存在指定路径5、dd删除当前行6、yy复制当前行7、p粘贴编辑模式&#xff1a;地址定界&#xff1a;1&#xff0c;2表示1到2行/pattern/,/pattern/sg&表示地址定界找到的东西\(XX\…