Question

我正在Vue.Js网站上工作，并使用Vue路由器的默认模式“哈希”。因此，网站网址是这样的：

www.mysite.com/#/Home

该网站已经被某些移动应用链接，我无法更改它们。但是我有一个新的要求，我需要更改URL以从URL中删除哈希（＃）。因此，我将Vue-router模式更改为“ history”，现在我的站点可以正常工作而没有哈希。像这样：

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

我要根据来自a question/answer回答的vue.js论坛中@Ohgodwhy和@nathany的评论回答自己的问题。

解决方案是从具有哈希的URL中删除has（＃），然后将其重定向到没有哈希的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();
});

Answer 2

对我来说，我只需要将外部旧版链接路由到当前的历史记录模式即可。

在已安装的App.vue中：

if (location.hash) {
  location.replace(location.hash.replace('#', ''))
}

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

2 个答案: