中文名字的 markdown 文件路由跳转会引起错误

vuepress-reco / vuepress-theme-reco-1.x

🎨 This is the repo for vuepress-theme-reco 1.

http://v1.vuepress-reco.recoluan.com

MIT License

1.63k stars 320 forks source link

中文名字的 markdown 文件路由跳转会引起错误 #340

Closed Limsanity closed 2 years ago

Limsanity commented 3 years ago

[x] I confirm that this is an issue rather than a question.

Bug report

中文名字的 markdown 文件路由跳转会引起 Maximum call stack size exceeded 错误。

What is actually happening?

markdown 文件包含中文名字，项目目录如下：

点击页面 link 会出现 Maximum call stack size exceeded 报错：

初步判断为 fixRouterError404 导致，注释掉该函数则表现正常。

页面中 $router 的属性存在如下 redirect 信息，fixRouterError404 不停触发该 redirect，导致 Maximum call stack size exceeded

生成 vuepress routes 代码中似乎有对 encodeURIComponent 的处理

Other relevant information

Your OS: mac os v10.15.7
Node.js version: v12.16.1
VuePress version: v1.7.1
VuePress-theme-reco version: v1.6.6
Which package manager did you use for the install(npm/cnpm/yarn)? yarn

wencwcoder commented 3 years ago

@Limsanity 路由跳转是基于 vue-router 的嘛，可能是它对中文的支持有问题，还是用英文命名，减少 bug 触发。

fenyuluoshang commented 3 years ago

@Limsanity 路由跳转是基于 vue-router 的嘛，可能是它对中文的支持有问题，还是用英文命名，减少 bug 触发。

但是已有升级代价就有点大了鸭

wencwcoder commented 3 years ago

@fenyuluoshang 这个文件名其实去看大部分博主都是用到日期命名的，因为最终在 vuepress 中显示的名字是根据 markdown 里面的 Front Matter 的 title 作为来源，和这个 xxx.md 的 xxx 没关系。

qianzai commented 3 years ago

主要是找md文件的时候，不用中文，就很难受

qianzai commented 3 years ago

哭了😭

shirayner commented 3 years ago

使用插件 vuepress-plugin-permalink-pinyin 可解决此问题，具体请参考基于VuePress和GitHub搭建个人博客站点

当文件名含有中文时，对应页面无法跳转，可通过如下插件解决这个问题，这个插件会将中文路径转换为拼音路径

本地安装：

npm install -D  vuepress-plugin-permalink-pinyin

然后配置插件：

module.exports = {
  plugins: [
      // 支持中文文件名
      [
        "permalink-pinyin",
        {
          lowercase: true, // Converted into lowercase, default: true
          separator: "-", // Separator of the slug, default: '-'
        },
      ],
  ]
}

效果：有如下中文文件