vue回到上一个位置

路由

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: {
        keepAlive: true
      }
    }
  ],
  // 页面切换始终在最顶部
  scrollBehavior (to, from, savedPosition) {
    console.log(savedPosition)
    if (savedPosition) {
      return savedPosition
    } else {
      return {
        x: 0,
        y: 0
      }
    }
  }
})

App.vue

  <div id="app">
    <!--<router-view/>-->
    <!--页面返回不刷新-->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>

第二种方式

    <!--include属性表示只有name属性为Material，MaterialThree的组件会被缓存  注意：是vue页面里的name，不是路由里面的name-->
    <keep-alive include="Material,MaterialThree">
      <router-view></router-view>
    </keep-alive>
    <!--不缓存-->
    <keep-alive exclude="Material">
      <router-view></router-view>
    </keep-alive>

比如可以做的后续操作

    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.url = from.path;
        if (vm.url === '/newProduct/theReport') {
          vm.lastClickIndex = sessionStorage.getItem("lastClickIndex")
          vm.lastClickIndex = vm.lastClickIndex ? vm.lastClickIndex : 0
          vm.pageNum = sessionStorage.getItem("pageNum")
          vm.pageNum = vm.pageNum ? vm.pageNum : 1
          vm.init()
        } else {
          vm.lastClickIndex = 0
          vm.pageNum = 1
          vm.init()
        }
      })
    },