Vue-router: Using Router with Office.js: router tries using push state even tho it's reset manually by the office js script

[Mafii]

What problem does this feature solve?

When using Microsofts Offic.js (e.g. in Word: https://docs.microsoft.com/en-us/javascript/api/word?view=word-js-preview), and using Vue with vue router, the router tries using push state, but the office js script deletes the push state since the excel web pane is not supporting the push state. The check in push state wheter push state can be used, checks for window.history && 'pushState' in window.history, but office.js resets the fields on window.history, not window.history itself (see https://stackoverflow.com/a/42703406/). I propose we check if Office.js is available in the context, and if so, we disable the push state.

What does the proposed API look like?

We would add a check at this position:

https://github.com/vuejs/vue-router/blob/c0d3376f4e3527bd761bd325873366ed74f5736b/src/util/push-state.js#L17

The additional check could look like this:

const officeJsLoaded = window.Office && window.Office.context;

so the whole function might look like this:

export const supportsPushState =
  inBrowser &&
  (function () {
    const ua = window.navigator.userAgent
    const officeJsLoaded = window.Office && window.Office.context

    if (
      officeJsLoaded ||
      ((ua.indexOf('Android 2.') !== -1 || ua.indexOf('Android 4.0') !== -1) &&
      ua.indexOf('Mobile Safari') !== -1 &&
      ua.indexOf('Chrome') === -1 &&
      ua.indexOf('Windows Phone') === -1)
    ) {
      return false
    }

    return window.history && 'pushState' in window.history
  })()

Alternatively, we could check if window.history.pushState is null, but I am not sure of the implications of this. Maybe someone who knows the expected state in the browsers can shed a light wheter that would make sense.

This would result in this return statement, the rest of the function not being changed:

return window.history && 'pushState' in window.history && window.history.pushState !== null

[posva]

I think checking for history.pushState to be a function should be enough

[Mafii]

I found a workaround so vue router doesn't have to be changed:

Before importing vue router, add the following lines:

delete window.history.pushState; // workaround to make sure vue router doesn't try using pushState
delete window.history.replaceState; // workaround to make sure vue router doesn't try using replaceState

Then, import vue router and init it, before initializing office.js.
Seems to work for me.