vue.jsvue-router

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


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.example.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.example.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.example.com/Home works, but the URL www.example.com/#/Home doesn't work.


Solution

  • 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();
    });