SOURCE

var App = {
	data () {
		return {
			scrollPositions: {}
		}
	},
	watch: {
		'$route' (newRoute) {
		    this.handleScrollAfterPush()
		}
	  },
	methods: {
		handleGetTop () {
			let el = this.$refs['scrolled']
			console.log(el)
		},
		handleClick (item) {
			this.handleScrollBeforePush()
			this.$router.push(item)
		},
		handleScrollBeforePush (contentElementName = 'scrolled') {
		  let el = this.$refs[contentElementName]
		  console.log(el.scrollTop)
		  this.scrollPositions = this.scrollPositions || {}
		  this.scrollPositions[this.$route.name] = { x: el.scrollWidth, y: el.scrollTop }
		},
		handleScrollAfterPush (contentElementName = 'scrolled') {
		  this.$nextTick(() => {
			let el = this.$refs[contentElementName]
			let { x, y } = this.scrollPositions[this.$route.name] || { x: 0, y: 0 }
			el.scrollTo(x, y)
		  })
		}
	}
}

const APage = { template: '<div>A<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p></div>' }
const BPage = { template: '<div>B<p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p><p>b</p></div>' }
const CPage = { template: '<div>C<p>c</p><p>c</p><p>c</p><p>c</p><p>c</p></div>' }

const router = new VueRouter({
	mode: 'history',
  routes: [
	  {
		  path: '/',
		  components: App
	  },
	  {
		  name: 'a',
	  	  path: '/a/1',
	  	  components: {
              content: APage,
          }
	  },
      {
	  	  name: 'b',
	      path: '/b/1',
	      components: {
              content: BPage,
          }
	  },
      {
	  	  name: 'c',
	      path: '/c/1',
	      components: {
              content: CPage,
          }
	  },
   
  ]
})

var Com = Vue.extend(App)
const app = new Com({ 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>
<script src="//unpkg.com/iview/dist/iview.min.js"></script>

<div id="app">
  <div class="navbar" style="position: fixed">
      <a href="javascript:void(0)" @click="handleClick('/a/1')" class="item">A Page</a>
      <a href="javascript:void(0)" @click="handleClick('/b/1')" class="item">B Page</a>
      <a href="javascript:void(0)" @click="handleClick('/c/1')" class="item">C Page</a>
	  <a href="javascript:void(0)" @click="handleGetTop" class="item">get top</a>
  </div>
  <div ref="scrolled" class="main">
      <router-view class="content" name="content"></router-view>
  </div>
</div>

* {
    padding: 0;
    margin: 0;
}

html, body {
    width: 100%;
    height: 100%;
}

a {
    text-decoration: none;
    color: #000;
}

#app {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.navbar {
    display: flex;
    background: #333;
}

.navbar .item {
    padding: 5px 10px;
    color: #fff;
}

.main {
    flex: 1;
    display: flex;
    height: 100%;
}

.sidebar .item {
    padding: 5px 10px;
}

.content {
    flex: 1;
}