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

[Limsanity]

• 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]

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

[fenyuluoshang]

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

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

[wencwcoder]

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

[qianzai]

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

[qianzai]

哭了😭

[shirayner]

使用插件 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: '-'
        },
      ],
  ]
}

效果：
有如下中文文件

会被插件转成拼音路径，访问如下地址

https://shirayner.github.io/snote/cs/backend/java/jvm/01_jvmhe-xin-zhi-shi-dian-tu-jie.html

会发现中文路径已经被转成拼音了

[AlanLee97]

牛逼，有用！！

[lyandut]

@shirayner 楼上太强了，mua~

[ATQQ]

一个相对简单解决方案：https://github.com/vuepress-reco/vuepress-theme-reco/issues/395#issuecomment-1019087787

[recoluan]

咱们可以关注一下主题 2.0，后期 1.0 将不再维护了。

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