非ASCII文件名的路由, 跳转 404 页面问题

MuYan2020-12-01VuePressVue VuePress

触发条件：文章的标签和分类如果包含中文或者空格等非ASCII文件名, 在第一次路由跳转不会出现，主要出现在返回非ASCII名路由页时，找不到对应路由，从而跳转到 404 页面
主要原因：浏览器直接非ASCII名的路由进行了一次 URI 编码导致匹配不到对应的路径，而后跳转到了404的路由
解决办法：对进行过 URI 编码的路由进行解码操作

在 enhanceApp.js 文件内进行 decodeURIComponent 解码

import Router from 'vue-router'

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

export default ({
  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()
    }
  })
}

昵称

邮箱

网址

按正序
按倒序
按热度

非ASCII文件名的路由, 跳转 404 页面问题

预览: