中文路径无效

[Nu11able]

Describe the bug 例如我有一个文件 Git笔记.md，它生成后的url路径为 localhost:8080/blogs/Git笔记.html 对于这种类似的url我点击它都是无效的

这是页面加载时的信息: vue-router.esm.js?8c4f:16 [vue-router] Route with path "/blogs/Tools/Git笔记.html" contains unencoded characters, make sure your path is correctly encoded before passing it to the router. Use encodeURI to encode static segments of your path.

当我点击该链接的时候报错信息如下： vue-router.esm.js?8c4f:16 [vue-router] uncaught error during route navigation: warn @ vue-router.esm.js?8c4f:16 vue-router.esm.js?8c4f:1 RangeError: Maximum call stack size exceeded at eval (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2172:51) at Array.map () at eval (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2172:38) at Array.map () at flatMapComponents (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2171:26) at extractGuards (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2480:16) at extractLeaveGuards (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2503:10) at HTML5History.confirmTransition (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2347:5) at HTML5History.transitionTo (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2261:8) at HTML5History.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2607:10)

[recoluan]

主题版本是多少啊

[Nu11able]

主题版本是多少啊 这是我npm info vuepress-theme-reco的输出: vuepress-theme-reco@1.6.11 | MIT | deps: 12 | versions: 183

[ChenSino]

主题版本是多少啊 这是我npm info vuepress-theme-reco的输出: vuepress-theme-reco@1.6.11 | MIT | deps: 12 | versions: 183

我也遇到了同样的问题了，我的版本是1.6.10,无法使用中文的路径以及md文件，使用就会报错

vue-router.esm.js?8c4f:2316 RangeError: Maximum call stack size exceeded
    at RegExp.exec (<anonymous>)
    at RegExp.[Symbol.match] (<anonymous>)
    at String.match (<anonymous>)
    at matchRoute (vue-router.esm.js?8c4f:1738:1)
    at Object.match (vue-router.esm.js?8c4f:1618:1)
    at VueRouter.match (vue-router.esm.js?8c4f:2938:1)
    at HTML5History.transitionTo (vue-router.esm.js?8c4f:2251:1)
    at HTML5History.push (vue-router.esm.js?8c4f:2606:1)
    at eval (vue-router.esm.js?8c4f:2380:1)
    at eval (redirect.js?605e:34:1)

[Eastboat]

同问

[puppetdevz]

这个应该是vuepress的问题，vue-theme-reco是基于vuepress的。可以通过安装vuepress-plugin-permalink-pinyin来解决这个问题。

[ChenSino]

这个应该是vuepress的问题，vue-theme-reco是基于vuepress的。可以通过安装vuepress-plugin-permalink-pinyin来解决这个问题。

亲测有用

[Eastboat]

好的，非常感谢！

------------------ 原始邮件 ------------------ 发件人: "vuepress-reco/vuepress-theme-reco" @.>; 发送时间: 2022年3月18日(星期五) 下午5:12 @.>; @.**@.>; 主题: Re: [vuepress-reco/vuepress-theme-reco] 中文路径无效 (Issue #23)

这个应该是vuepress的问题，vue-theme-reco是基于vuepress的。可以通过安装vuepress-plugin-permalink-pinyin来解决这个问题。

亲测有用

— Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android. You are receiving this because you commented.Message ID: @.***>

[duktig666]

这个应该是vuepress的问题，vue-theme-reco是基于vuepress的。可以通过安装vuepress-plugin-permalink-pinyin来解决这个问题。

这个插件并不是特别好用，会出现其他的兼容性问题。我之前也遇到这个问题了，我的版本是1.6.10

@Eastboat @ChenSino

解决办法参看我之前写的这篇文章： https://www.duktig.cn/2022/01/21/%E5%9F%BA%E4%BA%8Evuepress%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2%E7%B3%BB%E7%BB%9F%E5%8F%8A%E4%BC%98%E5%8C%96%E8%BF%87%E7%A8%8B-%E6%8C%81%E7%BB%AD%E6%9B%B4%E6%96%B0/#_1-md%E6%96%87%E4%BB%B6%E5%90%8D%E6%9C%89%E4%B8%AD%E6%96%87%E4%B8%8D%E8%83%BD%E6%AD%A3%E5%B8%B8%E8%B7%AF%E7%94%B1%E8%B7%B3%E8%BD%AC

文末的 问题1

但是会有一个新的不好的地方是 链接太长了……

解决： 添加文件.vuepress/enhanceApp.js

export default (ctx) => {
  const routes = ctx.router.getRoutes()

  ctx.router.beforeEach((to, from, next) => {
    // 解决decode后反复重定向的问题
    const route = routes.find((v) => v.regex.test(to.path))

    // .html有重定向路由，无需特殊处理
    if (/\.html$/.test(to.path)) {
      return next()
    }

    // 不特殊处理 非通配符的 没有重定向的路由
    if (route && route.path !== '*' && !route.redirect) {
      return next()
    }

    // 解决中文标签/分类路由无法被正确加载的问题
    if (decodeURIComponent(to.path) !== to.path) {
      return next(
        Object.assign({}, to, {
          path: decodeURIComponent(to.path),
          fullPath: decodeURIComponent(to.fullPath)
        })
      )
    }

    next()
  })

  // 临时解决，防止内部调用钩子再处理
  ctx.router.beforeEach = () => {
    return
  }
}

[duktig666]

@recoluan 上边这个方法虽然可以解决 中文路由问题，但是转成的链接会非常长，这个有办法优化吗？

[puppetdevz]

@recoluan 上边这个方法虽然可以解决 中文路由问题，但是转成的链接会非常长，这个有办法优化吗？

你可以尝试一下这个插件：vuepress-plugin-rpurl，不知道能不能满足你的需求

[recoluan]

目前主题已经支持中文路径。

[Eastboat]

这是来自QQ邮箱的假期自动回复邮件。   您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。