CODEWITHSUNDEEP
djangovue.jsvuejs3django-settingsvue-router4
Romain BOBOE
Romain BOBOE

Reputation: 377

Django + VueJS3 app: remove the Hashtag(#) from url

Here is a tricky situation. I'm working on a Django project on top of which VueJS CDN is used for one application's render. It goes like www.mywebsite.com/newapp where the new app only is rendered with VueJS.

The linked are handled by Vue router on a basic configuration:

// Routess // 
let routes = [
    { 
        path: '/',
        name: 'home',
        component: home,
        meta: { scrollPos:  { top: 140, left: 0 },
        },
    },
    { 
        path: '/about',
        name: 'about',
        component: about, 
        meta: {
            scrollPos: { top: 140, left: 0 },
        }, 
    },
];

const scrollBehavior = (to, from, savedPosition) => {
        if (to.hash) {
            return { el: to.hash };
        }
        return to.meta?.scrollPos ||  { top: 140, left: 0 };
    };

const router = VueRouter.createRouter({
    history: VueRouter.createWebHashHistory(),
    scrollBehavior,
    routes,
});

const app = Vue.createApp({
    data() {
        return {

        }
    },    
});

const vm = app.use(router).mount('#app');

So I get this url link with a hashtag:

www.mywebsite.com/newapp/#/

www.mywebsite.com/newapp/#/about/

on a nested component, It will just be like

When I use only router history like:

const router = VueRouter.createRouter({
    history: createWebHistory(),
    scrollBehavior,
    routes,
});

Then I get www.mywebsite.com/home

But I do need to have to static url.

It doesn't seemed to be a proper way to remove the hashtag (#) in the url.

I found a configuration that is related to this specific case scenario but since I'm on Django + Vue CDN app, I don't know if and how this can be applied

Upvotes: 0

Views: 331

Answers (2)

Amal Ambro
Amal Ambro

Reputation: 1

There will be something like

{ mode: `hash`}

Use history instead.

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    scrollBehavior() {
        return { x: 0, y: 0 }
    },
    ...
})

Upvotes: 0

Romain BOBOE
Romain BOBOE

Reputation: 377

So the solution that I found for this is to use createWebHistory() and to recreate all the paths with the base url in it.

let routes = [
{ 
    path: '/newapp/',
    name: 'home',
    component: home,
    meta: { scrollPos:  { top: 140, left: 0 },
    },
},
{ 
    path: '/newapp/about',
    name: 'about',
    component: about, 
    meta: {
        scrollPos: { top: 140, left: 0 },
    }, 
},
]

Upvotes: 0

Related Questions