SOURCE

const Home = { template: '<div class="home">Home <p style="margin-top:800px" id="home1">home 1 </p></div>' }
const About = { template: '<div class="about">About page <p style="margin-top:800px">hello there</p></div>' }
const scrollBehavior = (to, from, savedPosition) => {
  return { x: 0, y: 0 }
}
const router = new VueRouter({
	mode: 'history',
  scrollBehavior,
  routes: [
    { path: '*', component: Home },
    { path: '/about', component: About }
  ]
})

const app = new Vue({ router }).$mount('#app')

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <p class="header">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </p>
  <transition name="fade" mode="out-in">
    <router-view class="page"></router-view>
  </transition>
</div>

    .fade-enter-active, .fade-leave-active{
        transition: all .2s ease
    }
    .fade-enter, .fade-leave-active{
        opacity: 0;
    }
    
    .header {
      position: fixed;
      top: 0;
      left: 0;
    }
    
    .page {
      margin-top: 50px;
    }
    .home {
      background-color: rgb(240,255,240);
    }
    .about {
      background-color: rgb(255,240,240);
    }