Django + VueJS3 应用程序：从 url 中删除 Hashtag(#)

Question

这是一个棘手的情况。我正在开发一个 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');

所以我得到了带有主题标签的网址链接：

www.mywebsite.com/newapp/#/

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

在嵌套组件上，它就像

当我仅使用路由器历史记录时，例如：

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

然后我就明白了

www.mywebsite.com/home

但我确实需要静态网址。

这似乎不是删除网址中的井号标签 (#) 的正确方法。

我发现了一个与这个特定案例场景相关的配置，但由于我使用的是 Django + Vue CDN 应用程序，我不知道是否以及如何应用它

Answer 1

所以我找到的解决方案是使用

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

Answer 2

会有模式之类的东西

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

使用“历史”代替“哈希”