更新到2.0.1版本后，中文标签和分类跳转到空页面

[pennbay]

Bug report

What is actually happening?

更新到2.0.1版本后，文章中若含有中文标签和分类，那么点击该标签或分类会跳转到空页面，而英文标签和分类则无此问题。
比如，@recoluan 的网站，点击英文标签是正常的，但点击中文标签页面空白。

点击英文标签正常：

点击中文标签显示空白：

Other relevant information

• Your OS: Microsoft Edge version 97.0.1072.55
• Node.js version: v14.17.0
• VuePress version: v2.0.0-beta.27
• VuePress-theme-reco version: v2.0.1-alpha.18
• Which package manager did you use for the install(npm/cnpm/yarn)?yarn

[recoluan]

路径中含有中文的问题已经解决，但是最近在适配vuepress最新版本时出现了其他问题，还没有解决，所以现在还体验不到。

[ATQQ]

提供一个简单的解决办法

添加文件.vuepress/enhanceApp.js，写入以下内容

export default ({
    router, // 当前应用的路由实例
}) => {
    // 解决中文路由无法被正确加载的问题
    router.beforeEach((to, from, next) => {
        if (decodeURIComponent(to.path) !== to.path) {
            return next({
                ...to,
                path: decodeURIComponent(to.path),
                fullPath: decodeURIComponent(to.fullPath)
            })
        }
        next()
    })
}

相关资料

• vue-router beforEach钩子
• vuepress 应用级配置

[duktig666]

版本1.6.10
添加了 .vuepress/enhanceApp.js 文件，中文路由依然不能正常跳转

[duktig666]

vuepress-plugin-permalink-pinyin 这个插件使用默认的永久链接模式可以，但是如果修改永久链接模式为如下时会失效：

// 永久链接格式
permalink: "/:year/:month/:day/:slug",

[ATQQ]

版本1.6.10 添加了 .vuepress/enhanceApp.js 文件，中文路由依然不能正常跳转

我这边是1.5.7，明早 我跑1.6.10看看ε(*･ω･)_/ﾟ:･☆

[duktig666]

版本1.6.10 添加了 .vuepress/enhanceApp.js 文件，中文路由依然不能正常跳转

我这边是1.5.7，明早 我跑1.6.10看看ε(*･ω･)_/ﾟ:･☆

请问 1.6.10 可以吗

[ATQQ]

版本1.6.10 添加了 .vuepress/enhanceApp.js 文件，中文路由依然不能正常跳转

我这边是1.5.7，明早 我跑1.6.10看看ε(*･ω･)_/ﾟ:･☆

请问 1.6.10 可以吗

刚试了一下，也有问题，我是解决中文标签和分类用的

我去看看2.0的解决

[ATQQ]

2.0 是转成了 拼音 查看源码

[ATQQ]

我再debug看看中文路由的实际结果

[duktig666]

2.0 是转成了 拼音 查看源码

1.6.10 使用拼音插件 vuepress-plugin-permalink-pinyin ，我发现配置如下永久链接不生效：

// 永久链接格式
permalink: "/:year/:month/:day/:slug",

[ATQQ]

刚看了一下，定位到bug原因了。明天抽空fix一下。

decode的会被重定向到encode的路由

encode的路由又会被钩子decode

所以就爆栈了 ，无法正常跳转

[ATQQ]

@duktig666

1.6.10 临时解决方案可以用下面这个，亲测没问题了，bug原因如上所述

.vuepress/enhanceApp.js

export default (ctx) => {
    ctx.router.beforeEach((to, from, next) => {
        // 解决中文标签/分类路由无法被正确加载的问题
        if (!(/\.html$/.test(to.path)) && decodeURIComponent(to.path) !== to.path) {
            return next({
                ...to,
                path: decodeURIComponent(to.path)
            })
        }
        // 不特殊处理.html
        next()
    })

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

[ATQQ]

fix pr:https://github.com/vuepress-reco/vuepress-theme-reco/pull/399

[duktig666]

@duktig666

1.6.10 临时解决方案可以用下面这个，亲测没问题了，bug原因如上所述

.vuepress/enhanceApp.js

export default (ctx) => {
    ctx.router.beforeEach((to, from, next) => {
        // 解决中文标签/分类路由无法被正确加载的问题
        if (!(/\.html$/.test(to.path)) && decodeURIComponent(to.path) !== to.path) {
            return next({
                ...to,
                path: decodeURIComponent(to.path)
            })
        }
        // 不特殊处理.html
        next()
    })

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

测试，1.6.10版本可以成功跳转。

但是还存在一个问题，如果设置了永久链接的格式如下，依然会跳转失败：

// 永久链接格式
permalink: "/:year/:month/:day/:slug"

具体报错如下图：

[ATQQ]

报错 信息一样 原因应该差不都

晚点抽空看看这个

[ATQQ]

解决了 也是 无限重定向的问题 详见 commit vuepress-reco/vuepress-theme-reco@6e2775d

[ATQQ]

在你的仓库中的话可以 迭代一下

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

在你的仓库中的话可以 迭代一下

.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
  }
}

经过测试已经成功解决了这个问题

[recoluan]

@pennbay 2.x 的最新版本已经解决中文路径的问题了，可以尝试一下。