Vue.JS - “历史”和“哈希”路由器？

Question

我正在开发一个 Vue.Js 站点并使用 Vue-router 默认模式“hash”。所以网站的 URL 是这样的：

www.mysite.com/#/Home

该网站已被某些移动应用程序链接，我无法更改它们。但我有一个新要求，我需要更改 URL 以从 URL 中删除哈希 (#)。所以我将 Vue-router 模式更改为“历史”，现在我的网站可以在没有哈希的情况下工作。像那样：

www.mysite.com/Home

问题是使用历史记录模式时，带有哈希 (#) 的 URL 不起作用。但为了与使用哈希链接网站的移动应用程序兼容，我仍然需要使带有哈希的 URL 有效。

问题：

如何使用 Vue-router 历史记录模式并保持 URL 的哈希值正常工作？

我在 router/index.js 文件中尝试了以下方法：

export default new Router({
  mode: 'history',
  routes: [
    {
        path: '/Home',
        name: 'Home1',
        component: Home
    },
    {
        path: '/#/Home',
        name: 'Home2',
        component: Home
    },
    ...
]})

使用此配置，URL www.mysite.com/Home 可以工作，但 URL www.mysite.com/#/Home 不起作用。

Answer 1

我正在根据 @Ohgodwhy 的评论以及@nathany回答的 vue.js 论坛的问题/答案来回答我自己的问题。

解决方案是从具有哈希值的 URL 中删除“#”，并将其重定向到不带哈希值的 URL。这可以在 router.beforeEach() 方法中完成。

我的 router/index.js 是这样的：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'

export default new Router({
      mode: 'history',
      routes: [
        {
            path: '/Home',
            name: 'Home',
            component: Home
        },
      ],
})

然后我改为：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'

var router = new Router({
      mode: 'history',
      routes: [
        {
            path: '/Home',
            name: 'Home',
            component: Home
        },
      ],
})
export default router;

router.beforeEach((to, from, next) => {
    // Redirect if fullPath begins with a hash (ignore hashes later in path)
    if (to.fullPath.substr(0,2) === "/#") {
        const path = to.fullPath.substr(2);
        next(path);
        return;
    }
    next();
});