vuepress中文标签或其他路径引发的404问题

vuepress中文标签或其他路径引发的404问题

最后修改时间:7 months ago

这个问题其实已然不新鲜了,主要源于浏览器对直接输入的中文 url 做了一次 encode 导致 匹配不到 vue-router 对应的 path

要解决这个问题,可以参照 Pull requests [1]

有了这层思路,问题也就不难得到解决。

方法1:纠正 router 的跳转

因为 vuepress 的机制问题,没有匹配到 layoutmarkdown 文件,最终会自动导向 404.vue 或者 NotFound.vue 。了解到这层后,我们可以直接在导向的终点对其进行操作。

mounted() {
    let routes = [this.$author._metaMap, this.$tag._metaMap],
      routeList = []; // 将所有包含中文需要重新匹配的 router path 写入一个数组中
    routes.forEach((route) => { // 遍历将对象糅合成一个数组
      Object.keys(route).forEach((key) => {
        routeList.push(route[key].path);
      });
    });
    if(routeList.includes(this.$route.params.pathMatch)){ // 判断是否存在当前 route ,存在则跳转
      this.$router.push(this.$route.params.pathMatch)
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

Tips

this.$author._metaMapthis.$tag._metaMap 来源于 config.js 中的 frontmatters ; 参照 frontmatter-classifier (opens new window)

方法2:对 url 进行 decode

// enhanceApp.js
import Router from 'vue-router'
import Vue from 'vue'

const router = new Router({
  mode: 'history'
})

// 防止相同路由跳转时报错
const VueRouterPush = Router.prototype.push
Router.prototype.push = function push (to) {
  return VueRouterPush.call(this, to).catch(err => err)
}
export default ({
  Vue,
  router
}) => {
  router.beforeEach((to, from, next) => {
    // 解决非ASCII文件名的路由, 防止 404
    const decodedPath = decodeURIComponent(to.path)
    if (decodedPath !== to.path) {
      next(Object.assign({}, to, {
        fullPath: decodeURIComponent(to.fullPath),
        path: decodedPath
      }))
    } else {
      next()
    }
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

  1. Support filename that contains non-ASCII and unicode chars (opens new window) ↩︎

- 全文完 -

留下一条留言?
默认颜色

主题颜色

标准颜色

更多颜色...