vuepress-theme-reco icon indicating copy to clipboard operation
vuepress-theme-reco copied to clipboard

中文路径无效

Open Nu11able opened this issue 3 years ago • 10 comments

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)

Nu11able avatar Feb 23 '22 00:02 Nu11able

主题版本是多少啊

recoluan avatar Feb 23 '22 13:02 recoluan

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

Nu11able avatar Feb 24 '22 06:02 Nu11able

主题版本是多少啊 这是我npm info vuepress-theme-reco的输出: [email protected] | 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)

ChenSino avatar Mar 14 '22 08:03 ChenSino

同问

Eastboat avatar Mar 15 '22 14:03 Eastboat

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

puppetdevz avatar Mar 18 '22 09:03 puppetdevz

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

亲测有用

ChenSino avatar Mar 18 '22 09:03 ChenSino

好的,非常感谢!

------------------ 原始邮件 ------------------ 发件人: "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: @.***>

Eastboat avatar Mar 22 '22 14:03 Eastboat

这个应该是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 avatar Mar 26 '22 13:03 duktig666

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

duktig666 avatar Mar 26 '22 13:03 duktig666

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

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

puppetdevz avatar Mar 26 '22 15:03 puppetdevz

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

recoluan avatar May 06 '23 00:05 recoluan

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

Eastboat avatar May 06 '23 00:05 Eastboat