Vue.JS - Both 'history' and 'hash' router?

Question

I'm working on a Vue.Js site and using the Vue-router default mode "hash". So the site URL is something like that:

www.mysite.com/#/Home

This site is already being linked by some mobile apps, and I can't change them. But I have a new requirement and I need to change the URLs to remove the hash (#) from the URL. So I changed the Vue-router mode to "history" and now my site is working without the hash. Like that:

www.mysite.com/Home

The problem is that using the history mode the URL with the hash (#) doesn't work. But for compatibility with the mobile apps that link the site with hash, I still need to make the URL with the hash works.

QUESTION:

How can I use the Vue-router history mode and also keep the URLs with hash working?

I tried the following way at the router/index.js file:

export default new Router({
  mode: 'history',
  routes: [
    {
        path: '/Home',
        name: 'Home1',
        component: Home
    },
    {
        path: '/#/Home',
        name: 'Home2',
        component: Home
    },
    ...
]})

Using this configuration the URL www.mysite.com/Home works, but the URL www.mysite.com/#/Home doesn't work.

Derzu Derzu · Accepted Answer · 2019-10-17T00:56:35

I'm answering my own question based on the comment of the @Ohgodwhy and a question/answer from the vue.js forum that was answered by @nathany.

The solution is to remove the has (#) from the URLs that have the hash, and redirecting it to the URL without the hash. It can be done at the method router.beforeEach().

My router/index.js was something like that:

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'

export default new Router({
      mode: 'history',
      routes: [
        {
            path: '/Home',
            name: 'Home',
            component: Home
        },
      ],
})

Then I changed to:

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'

var router = new Router({
      mode: 'history',
      routes: [
        {
            path: '/Home',
            name: 'Home',
            component: Home
        },
      ],
})
export default router;

router.beforeEach((to, from, next) => {
    // Redirect if fullPath begins with a hash (ignore hashes later in path)
    if (to.fullPath.substr(0,2) === "/#") {
        const path = to.fullPath.substr(2);
        next(path);
        return;
    }
    next();
});

Vue.JS - Both 'history' and 'hash' router?

2 Answers