Search code examples
vue.jsvue-routerbookmarks

Vue Router - Changing to history mode in an existing application and handling old bookmarks


I have an application that was not using 'history' mode in vue router settings. So all the existing URLs have a '/#/'. Example - ~/#/login or ~/#/page1

When I add the mode: 'history', the new urls work great. However if I try an old bookmark that still has '#', the routing fails.

Do I have to use router.replace to strip off the '#' or is there a better way of doing this?

I looked through a number of solutions but none (that I checked) talk about this scenario where I am switching to 'history' mode for an existing application


Solution

  • In my case all new pages have been introduced after setting history mode (the condition && to.name !== 'newPage' is very specific to my case), so the solution that does work for me is

    router.beforeEach((to, from, next) => {
      const redirectPath = to.hash.split('#')[1]
      if (to.hash && to.name !== 'newPage') {
        next({
          path: redirectPath,
          hash: '',
          replace: true
        })
      }
    
    ...
    return next()
    }
    

    In this case, if I use my old bookmark (say ~/#/page1) the to.hash holds the value '#/page1', so all am doing is splitting the hash to ["", "/page1"] and then setting path in next() to '/path1' with replace being set to true. Works for me.