1.思路
- vue 缓存 加 局部刷新 ,起到路由切换时,内容发生改变但是不刷新界面,从而实现网页音乐播放器一直播放同一首歌,而不是随着页面刷新停止播放,
2 解决步骤
- vue 实现缓存(keep-alive)
- 首先是路由设置
// 在路由的 meta属性中设置keepAlive:true
export default new Router({routes: [{path: '/', name: 'homePage', component: homePage, meta: {title: '无心|心做し',keepAlive:true},},{path: '/login', name: 'login', component:login,meta:{title: '无心|心做し',keepAlive:true}},{path: '/moodEssay', name: 'moodEssay', component:moodEssay,meta:{title: '无心|心做し',keepAlive:true}},{path: '/messageBoard', name: 'messageBoard', component:messageBoard,meta:{title: '无心|心做し',keepAlive:true}},{path: '/pigeonholeManagement', name: 'pigeonholeManagement', component: pigeonholeManagement,meta:{title: '无心|心做し',keepAlive:true}},],
})
- 第二是在app.vue界面 设置局部刷新函数
<template><keep-alive><div id="app">// 将路由 交给keep-alive 来管理<keep-alive><router-view :key="key" v-if="isRouterAlive"/></keep-alive><headerNav v-show="$route.name!=='login'"></headerNav></div></keep-alive>
</template>配置局部刷新函数provide(){return{reload:this.reload}},data(){return{isRouterAlive:true}},methods:{reload(){this.isRouterAlive = false;this.$nextTick(function () {this.isRouterAlive = true;})}}// 接下来就是使用了
监听路由跳转 用局部刷新来进行页面路由跳转watch: {'$route' (to, from) {this.reload();}},
3.效果图
-
路由跳转前
-
路由跳转后
-看看浏览器控制台 elment
在 这样处理后 路透跳转的时候
- 如果只是简单的路由跳转
- boday下的 <div id =’‘app’’>(也就是vue挂载的div容器会先销毁,然后在重新创建,这样一来页面音乐播放器自然会停止播放了)
4.个人体会(不对勿喷)
- vue路由跳转页面:销毁 容器 然后创建容器,重新加载页面(加载数据),渲染容器,实现数据刷新
- vue 缓存+局部刷新:通过keep-alive 去缓存里读取数据,局部刷新就是将缓存中读来的数据重新渲染容器,所以整个过程容器一直存在,这就实现了数据更新,但是页面没有进行刷新
- 前者通过容器的创建 销毁 重新读取数据 加载,渲染 实现 界面刷新
- 后者通过容器的内容局部更新(从缓存中读取需要跟新的数据),实现 界能面刷新