Приложение 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 },
},
},
]