vue跳转局部页面切换

vue在跳转的时候，让只切换想要的局部页面，而不是整个页面切换，比如A页面跳转到B页面，但是动态背景动画不刷新，只是/a到/b的时候，/a的内容替换成了/b的。
下面代码只是列出了关键部分，不变的部分背景bk.vue，切换的页面home.vue,a.vue,b.vue，加上一个index.js即可实现。
bk.vue

<template>
  <div class="login">
    <div class="bg-gallery"></div>
    <router-view></router-view>
    <div class="action-button prev" @click="slideRight"></div>
    <div class="action-button next" @click="slideLeft"></div>
  </div>
</template>

home.vue

首页
<template>
<el-button type="primary" @click="$router.push('/a')" >跳转到A</el-button>
<el-button type="primary" @click="$router.push('/b')" >跳转到B</el-button>
</template>

a.vue

<template>
<div>aaaaa</div>
<el-button type="primary" @click="$router.push('/home')" >跳转到home</el-button>
</template>

b.vue

<template>
<div>bbbbb</div>
<el-button type="primary" @click="$router.push('/home')" >跳转到home</el-button>
</template>

index.js

Vue.use(Router)

import Bk from '@/views/bk'

// 公共路由
export const constantRoutes = [
  {
    path: '/bk',
    component: Bk,
    hidden: true,
    children: [
      {
        path: '/home',name: 'home',
        component: (resolve) => require(['@/views/home'], resolve),
      },
      {
        path: '/a',name: 'a',
        component: (resolve) => require(['@/views/a'], resolve),
      },
      {
        path: '/b',name: 'b',
        component: (resolve) => require(['@/views/b'], resolve),
      },
    ]
  },
......
]

export default new Router({
  mode: 'history', // 去掉url中的#
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})