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

Question

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

I'm not sure to understand what you mean by 'all html request to index.html'. Let's say there are many apps and 'newapp' is one of them. There are many base-index.html files. — Romain BOBOE, Mar 10 '22 at 17:28
If you don't want use # you should router ~/vueApp/* to ~/vueApp/index.html, vue will control router in client — Xiao_e_yun, Mar 11 '22 at 09:53
I made a bit of research on that and I have to admit, I still don't understand the like you'r making between the index.html file and ~/vueApp/* The base_index.html file here is the one with the — Romain BOBOE, Mar 11 '22 at 21:57

score 0 · Answer 1 · answered Mar 15 '22 at 15:00

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 },
    }, 
},
]

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

1 Answers1