[2.0] scrollBehavior doesn't store a scrolling position on the first page

Vue.js & vue-router version

2.0.2, 2.0.1

Steps to reproduce

http://jsfiddle.net/sergeymakinen/zfwhp07p/

• Click some Go to… links
• Click Go back links until you’re back
• Watch the browser’s console

Expected

scrollBehavior callback should return all saved positions on all pages back to the start page.

Actually happens

Instead the callback returns all except the very first page saved positions. It looks like there should be some replaceState call with a generated key when history mode initializes to be able to catch the key later in popstate.

[woshizja]

I read the vue-router.js source code, when you click browser history back button，the following things will happen：

**1.**popstate event triggered，then we here：

window.addEventListener('popstate', function (e) {
      _key = e.state && e.state.key
      var current = this$1.current
      this$1.transitionTo(getLocation(this$1.base), function (next) {
        if (expectScroll) {
          this$1.handleScroll(next, current, true)
        }
      })
})

Note that the original history entry (for http://example.com/example.html) has no state object associated with it.

So, _key will be null.

**2.**Then, the program will run into this handleScroll function:

HTML5History.prototype.handleScroll = function handleScroll (to, from, isPop) {
    ......
    // wait until re-render finishes before scrolling
    router.app.$nextTick(function () {
      ......
    })
  };
  return HTML5History;
}(History));

**3.**There is a $nextTick function, so program will run into it:

// content of $nextTick()
var position = getScrollPosition(_key)

// injection position only when isPop
var shouldScroll = behavior(to, from, isPop ? position : null)
if (!shouldScroll) {
    return
}
var isObject = typeof shouldScroll === 'object'
// deal hash string ......
 if (position) {
      window.scrollTo(position.x, position.y)
 }

Because the _key is null, so getScrollPosition(_key) will return null. My config:

const router = new VueRouter({
    routes,
    mode: 'history',
    scrollBehavior(to, from, savedPosition) {
        console.log(savedPosition)
        if (savedPosition) {
            return savedPosition
        } else {
            return { x: 0, y: 100 }
        }
    }
});

shouldScroll will be {x:0, y:0}, program will run window.scrollTo(position.x, position.y), then page will scroll to top temporarily.

Attention： temporarily!

Continue running the program, The page will scroll to its original location, scrollTop(0, 100) will be invalid! It doesn’t work like the doc said：

This will simply make the page scroll to top for all route navigations.

I am very confused!

4.vue-router will listen ‘scroll’ event:

if (expectScroll) {
    window.addEventListener('scroll', function () {
        saveScrollPosition(_key)
    })
}

_key is null, won’t save position. But, when you already back to last page，your scroll behavior also trigger this，and the _key will have a value, because：

var genKey = function () { return String(Date.now()); }
var _key = genKey()

Now, I’m not sure I know how to use vue-router scrollBehavior.

[ghost]

I’ve been struggling with the same problem.

When the router is initialized, the current route R1 does not have state registered in the history (window.history.state -> null). Let’s say that R1 contains a long list view and the user scrolls to the bottom, so that window.scrollY becomes 2500.

Now the user navigates to another route R2 by clicking one of the list items. The scroll position of R1 ({ x: 0, y: 2500 }) is saved to the positionStore (scroll.js#L7). When clicking the back button, popstate event callback receives info about R1. Since it does not have its history state registered (e.state = null), no expected scrolling takes place. That’s where it breaks.

My current workaround is to replace the history state of the current route when the router is initialized. I just added pushState(cleanPath(this.getCurrentLocation()), true) to the HTML5History constructor. The critical part is to have the generated key added to the first route’s state.