首页 > 其他 > 详细

vue router keep-alive

时间:2021-07-09 18:06:54      阅读:22      评论:0      收藏:0      [点我收藏+]

被包含的组件保留状态,避免重新渲染

Furong.vue

<template>
  <div id="Furong">
    <p>{{msg}}</p>
    <p>{{userInfo}}</p>
  </div>
</template>

<script>
  export default {
    name: ‘Furong‘,
    data() {
      return {
        msg: ‘hello furong!‘
      }
    },
    computed: {
      userInfo() {
        return this.$route.query;
      }
    },
    created() {
      console.log("created");
    },
    updated() {
      console.log("updated");
    },
    mounted() {
      console.log("mounted");
    },
    destroyed() {
      console.log("destroyed");
    },
    activated() {
      console.log("activated");
    },
    deactivated() {
      console.log("deactivated");
    }
  }
</script>

<style>
  #Furong {
    color: green;
  }
</style>
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view />
  </div>
</template>

技术分享图片

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>

技术分享图片

vue router keep-alive

原文:https://www.cnblogs.com/zhangxuechao/p/14990668.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!