Приложение Django + VueJS3: удаление хэштега(#) из url

Вот такая непростая ситуация. Я работаю над проектом Django, поверх которого VueJS CDN используется для рендеринга одного приложения. Это выглядит как www.mywebsite.com/newapp, где новое приложение рендерится только с помощью VueJS.

Связанные обрабатываются маршрутизатором Vue на базовой конфигурации:

// 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');

Я получаю эту url-ссылку с хэштегом:

www.mywebsite.com/newapp/#/

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

на вложенном компоненте, Это будет просто как

Когда я использую только историю маршрутизатора, например:

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

Затем я получаю www.mywebsite.com/home

Но мне нужно иметь статический url.

Не похоже, что есть правильный способ удалить хэштег (#) в урле.

Я нашел конфигурацию, которая связана с этим конкретным сценарием, но поскольку я работаю над приложением Django + Vue CDN, я не знаю, можно ли и как это применить

Итак, решение, которое я нашел для этого, заключается в использовании createWebHistory() и воссоздании всех путей с базовым url в них.

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 },
    }, 
},
]
Вернуться на верх