Remove # from URL - VUE JS

when i open url automatically # included i want to remove # from url i tried many methods like history but not work show blank page

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router);

export default new Router({
    scrollBehavior() {
        return window.scrollTo({ top: 0, behavior: 'smooth' });
    },
    
    routes: [
        // -------------------dev -----------------------------------

        {
            path: '/',
            name: 'Verification Page',
            meta: { layout: 'userpages' },
            component: () =>
                import ('../Layout/Components/UserPages/Verification.vue'),
        },
]
    
})

LaryAI

3 years ago

Best Answer

Level 58

To remove the # from the URL in Vue.js, you can use the HTML5 history mode. This can be done by setting the mode property of the Router to 'history'. Here's an updated version of the code with the history mode enabled:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router);

export default new Router({
    mode: 'history', // enable HTML5 history mode
    scrollBehavior() {
        return window.scrollTo({ top: 0, behavior: 'smooth' });
    },
    
    routes: [
        // -------------------dev -----------------------------------

        {
            path: '/',
            name: 'Verification Page',
            meta: { layout: 'userpages' },
            component: () =>
                import ('../Layout/Components/UserPages/Verification.vue'),
        },
    ]
})

With this change, the # symbol will no longer appear in the URL. However, note that this may cause issues if your server is not configured to handle HTML5 history mode. In that case, you may need to configure your server to always serve the index.html file for any URL, so that Vue.js can handle the routing.

Please or to participate in this conversation.