vue路由在keep-alive下的刷新问题和路由监听

1.在keep-alive中直接添加 include,cachedViews(Array类型:包含vue文件的组件name都将被缓存起来);反之exclude则是不包含;

注意:所有.vue组件文件都必须附上name属性!!!建议用vuex管理cachedViews

<keep-alive :include="cachedViews">
<router-view></router-view>
</keep-alive>
  2.监测$router的变化;

watch: {
// 如果路由有变化,会再次执行该方法
"$route": "fetchDate"
}
  但是会在页面离开时再次执行fetchDate,并不是我们需要的,所以可以在to和from上添加执行逻辑,但也是十分的麻烦

//router是只读状态,所以赋值操作会失效 watch: {route (to, from) {
if(list.indexOf(from.path) > -1){ //自行添加逻辑,list为你不想有缓存的路径
        this.getData()
}
  }
}
  3.在添加keep-alive后会增加两个生命周期mounted>activated、离开时执行deactivated,路由的进入和切换回相应的触发activated和deactivated,这样就可以在每次入路由执行更细致的操作了

//如果是服务端渲染就算了
activated() {
//只刷新数据,不改变整体的缓存
this.fetchDate();
}
  4.还有更简单粗暴的

//我就笑笑不说话
<div>
<keep-alive>
<router-view v-if="route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!route.meta.keepAlive"></router-view>
</div>
  5.还有种情况,在不同路由应用了相同的vue组件

{path:'aaa',component:Mompage,name:'mom'},
{path:'bbb',component:Mompage,name:'momPlus'}
  默认情况下当这两个页面切换时并不会触发vue的created或者mounted钩子,需要手动的watch:$router(又回到上面的步骤),或者在router-view上加上唯一值。

//随便抄一段代码过来
<router-view :key="key"></router-view>
computed: {
key() {
return this.route.name !== undefined? this.route.name + +new Date(): this.$route + +new Date()
}
}

来源https://www.cnblogs.com/dansingal/p/8302100.html

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • VUE Vue :数据驱动的M V Vm框架 m :model(后台提供数据),v :view(页面),vM(模板...
    wudongyu阅读 10,756评论 0 11
  • 回忆: 我们知道,h5的history或者hash帮助我们解决了,变化url跳转页面不发送请求,并且我们能监听到u...
    LoveBugs_King阅读 9,069评论 0 5
  • keep-alive keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个...
    羊烊羴阅读 232,868评论 7 103
  • 这是我第5篇简书。   由于Vue在开发时对路由支持的不足,于是官方补充了vue-router插件。vue的单页面...
    东西里阅读 47,261评论 20 212
  • 一 对于一个准备涉足市场营销策划的人来讲,首先市场营销策划的目的应该明白,很显然是给企业带来销量和利润,使企业利润...
    任纪伟阅读 3,199评论 0 0