Javascript Vue路由器、GitHub页面和自定义域不使用路由链接

我的域名：

myname.com

My GitHub回购：

myname

我的GitHub名称：

myname

基础GH页面URL:

myname.github.io/myname

我的问题：我用历史Vue路由器设置了以下页面：主页、联系人、项目
每当我进入

myname.com/contact

，它就会将我路由到404。当我点击一个链接将我重定向到

/contacts

，它会将其推送到地址栏，但如果刷新，它会路由到404。我读过一些帖子，比如：和，但问题仍然存在，自定义域增加了复杂性。我也读过这篇文章：但是，有一个React路由器页面的示例，其中一个浏览器路由器在GH页面上工作：，repo:

以下是我所做的：

• 我的

  package.json

  有以下行：

  “主页”：https://myname.com/“

• 我的

  vue.config.js

  就是这样：

module.exports={
公共路径：'/'
}

• 我的路由器在我的路径上：

  /src/Router/index.js

  ，传递到

  main.js

  new Vue（）

  ，并按如下方式导出：

导出默认的新VueRouter({
base:process.env.base\u URL，
模式：“历史”，
路线
})

• 在my

  App.vue

  （输入组件）中，模板如下所示：

---

我不完全理解您关于重新路由为何/如何工作的评论/困惑，因为您正确总结了前半部分，即Github将其视为无效URL，并将其发送到您的自定义404页面。404页面然后将其转换为指向根页面的查询字符串

您的设置中是否缺少自定义

index.html

页面

index.html

本身将查询字符串解码回“route param”类型的表示形式，以便当应用程序实际加载时，它可以使用正确的视图和状态进行初始化

---

实际上，我在我的GH pages网站上使用了这个精确的设置：-->

我无法通过Vue解决这个问题，但是，正如前面提到的，这可能是GitHub以及它们如何处理URL的问题。最简单的修复方法是使用散列路由器，使条目URL保持静态。然而，这将在您的URL中引入可以说是令人厌恶的

/#/

考虑到本机不支持捕获所有路由，有人为此找到了解决方法：注意：这可能不利于SEO，因为预期的URL实际上并不存在。这是他们的404重定向的一个技巧，并在索引页上处理它。这是一个投资组合网站，因此，我现在可以接受。如果我或其他人找到了更好的解决方案，这将得到更新

解决方法：

在

/public

内部添加名为

404.html的文件，并粘贴以下内容：


将此更改为您的标题
//麻省理工学院执照
// https://github.com/rafgraph/spa-github-pages
//此脚本获取当前url并转换路径和查询
//字符串转换为一个查询字符串，然后重定向浏览器
//到仅包含查询字符串和哈希片段的新url，
//例如。https://www.foo.tld/one/two?a=b&c=d#qwe，成为
// https://www.foo.tld/?/one/two&a=b~and~c=d#qwe
//注意：这个404.html文件必须至少有512字节才能工作
//使用Internet Explorer（当前大于512字节）
//如果您正在创建项目页面网站，而不使用自定义域，
//然后将pathSegmentsToKeep设置为1（企业用户可能需要将其设置为>1）。
//这样，代码将只替换路径的路由部分，而不替换路径的路由部分
//应用程序所在的真实目录，例如：
// https://username.github.io/repo-name/one/two?a=b&c=d#qwe 变成
// https://username.github.io/repo-name/?/one/two&a=b~and~c=d#qwe
//否则，将PathSegmentStokep保留为0。
var PathSegmentStokep=0；
var l=窗口位置；
l、 替换(
l、 协议+'/'+l.hostname+（l.port？：'+l.port:''）+
l、 pathname.split（'/'）.slice（0，1+pathSegmentsToKeep.join（'/'））+'/？/'+
l、 pathname.slice（1）.split（'/'）.slice（pathSegmentsToKeep）.join（'/'）.replace（/&/g'~和~'））+
（l.search？&'+l.search.slice（1）。替换（/&/g，“~和~”）：“”）+
l、 散列
);

在
/public/index.html
中，在
后面的
中添加以下内容：


//麻省理工学院执照
// https://github.com/rafgraph/spa-github-pages
//此脚本检查查询字符串中是否存在重定向，
//将其转换回正确的url并将其添加到
//使用window.history.replaceState（…）的浏览器历史记录，
//这不会导致浏览器尝试加载新url。
//当单页应用程序进一步加载到此文件中时，
//正确的url将在浏览器的历史记录中等待
//单页应用程序将相应地进行路由。
（功能（l）{
如果（l.search[1]=='/'））{
var decoded=l.search.slice（1）.split（'&'）.map（函数）{
返回s.replace（/~和~/g，&'））
}).加入（“？”）；
window.history.replaceState（null，null，
l、 pathname.slice（0，-1）+解码+l.hash
);
}
}（窗口位置）

这对我很有效，现在我只需输入
myname.com/contact
即可访问联系人页面。如果您在
/public
中嵌套了SPA，也可以使用相同的技巧来实现此功能。
GitHub不会将这些请求重定向到您的应用程序。请解释一下。快速修复方法是删除
模式：“历史记录”
您链接的“反应”答案也适用于您的应用程序。您的SPA使用什么技术和框架并不重要。你还是