标签：Vue console log alive keep 组件 path

keep-alive

• router-view 也是一个组件，如果直接被包在keep-alive里面，所有路径匹配到的视图组件都会缓存，保持生存
• keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染

    <keep-alive exclude="profile,User">
      <router-view></router-view>
    </keep-alive>

上面这行代码将会把name属性值为 profile 和 user的两个组件对于keep-alive排除在外，是他们可以正常的被创建和销毁。
当有多个组件是，需要用逗号将他们隔开，切记，不要加空格或者其他符号:第二个组件没有生效，只有第一个组件有用。

使用keep-alive标签将要保存live的组件包裹起来

router -view 也是一个组件，如果直接被包括在keep-alive里面，所有的路劲匹配到的视图组件都会被缓存。

    <keep-alive>
      <router-view></router-view>
    </keep-alive>

小问题（学习老师的解决问题的思路）

问题讲解

<script>
  export default {
    name: '',
    data(){
      return{
        message:'你好呀',
        path:'/home/news'
      }
    },
    //实例创建后开始执行
    created(){
      // document.title='首页'
      console.log(' home created');
      
    },
    //将tamplate等模板相关的东西被挂载到DOM就会回调这个生命周期函数
    // mounted(){
    //   console.log('mounted')
    // },
    // //界面发生刷新后就会回调
    // update(){
    //   console.log('update')
    // }
    destroyed(){
      
      console.log(' home destrotyed')
    },
    // 这两个函数只有该组件使用了keep-alive时才有效
    activated(){
      console.log(this.path);
      this.$router.push(this.path);
    },

    beforeRouteLeave(to,from,next){
      console.log(this.$route.path)
      this.path = this.$route.path;
      next();
    }
  }
</script>

在home组件中使用path变量保存路径，然后使用beforeRouteLeave保存路由跳出的url，使用activated在下一次活跃路由时，将url定向到原来跳出的地点。

Vue生命周期讲解

标签：Vue,console,log,alive,keep,组件,path
来源： https://www.cnblogs.com/liyublogs/p/16345157.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。