vue 解决路由切换 网页音乐播放器继续播放音乐问题（模仿pjax 原理，解决个人网站局部刷新问题）

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 去缓存里读取数据，局部刷新就是将缓存中读来的数据重新渲染容器，所以整个过程容器一直存在，这就实现了数据更新，但是页面没有进行刷新
• 前者通过容器的创建 销毁 重新读取数据 加载，渲染 实现 界面刷新
• 后者通过容器的内容局部更新（从缓存中读取需要跟新的数据），实现 界能面刷新