标签：获取 组件 div create int back one 跳转 page
利用keep-alive标签实现前进刷新后退不刷新
需求:路由前进式能够刷新数据, 返回时页面保存之前的操作.
>修改App.vue中router-view, 根据路由中meta字段设置的变量判断是否被展示
<template>
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
>在router/index.js中添加meta字段
{ path: ‘/PointsList‘, name: ‘PointsList‘, component: () => import(‘@/views/PointsList‘), meta: { keepAlive: true, // 判断该组件是否需要缓存 isBack: false // 判断是不是返回操作 } }
>在对应的组件中
手动刷新之后没有了缓存数据, 这时返回也需要重新加载页面获取数据, 这里在data中定义变量判断
data() { return { isFirstEnter:false // 定义变量来判断是否第一次进入，默认false }; }
created中把isFirstEnter变为true，说明是第一次进入或刷新了页面
created() { this.isFirstEnter=true; // 只有第一次进入或者刷新页面后才会执行此钩子函数 // 使用keep-alive后（2+次）进入不会再执行此钩子函数 }
beforeRouteEnter中判断是从哪个页面过来的
beforeRouteEnter(to, from, next) { if (from.name == "page") { // 这个name是下一级页面的路由name to.meta.isBack = true; // 设置为true说明你是返回到这个页面，而不是通过跳转从其他页面进入到这个页面 } next(); }
activated中执行获取数据的方法
因为这个页面需要缓存。只有第一次进入时才会执行created和mounted方法，再次进入就不执行了。而activated每次进入都执行，所以在这个钩子函数中获取数据
activated() { if(!this.$route.meta.isBack || this.isFirstEnter){ // 如果isBack是false，表明需要获取新数据，否则就不再请求，直接使用缓存的数据 // 如果isFirstEnter是true，表明是第一次进入此页面或用户刷新了页面，需获取新数据 this.str=‘‘// 把数据清空，可以稍微避免让用户看到之前缓存的数据 this.getData(); } // 恢复成默认的false，避免isBack一直是true，导致下次无法获取数据 this.$route.meta.isBack=false // 恢复成默认的false，避免isBack一直是true，导致每次都获取新数据 this.isFirstEnter=false; }
标签：获取 组件 div create int back one 跳转 page
原文地址：https://www.cnblogs.com/---godzilla---/p/11525035.html
