更新到2.0.1版本后,中文标签和分类跳转到空页面
pennbay opened this issue · 19 comments
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
路径中含有中文的问题已经解决,但是最近在适配vuepress最新版本时出现了其他问题,还没有解决,所以现在还体验不到。
提供一个简单的解决办法
添加文件.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 应用级配置
版本1.6.10
添加了 .vuepress/enhanceApp.js
文件,中文路由依然不能正常跳转
vuepress-plugin-permalink-pinyin 这个插件使用默认的永久链接模式可以,但是如果修改永久链接模式为如下时会失效:
// 永久链接格式
permalink: "/:year/:month/:day/:slug",
版本1.6.10 添加了
.vuepress/enhanceApp.js
文件,中文路由依然不能正常跳转
我这边是1.5.7,明早 我跑1.6.10看看ε(*・ω・)_/゚:・☆
版本1.6.10 添加了
.vuepress/enhanceApp.js
文件,中文路由依然不能正常跳转我这边是1.5.7,明早 我跑1.6.10看看ε(*・ω・)_/゚:・☆
请问 1.6.10 可以吗
版本1.6.10 添加了
.vuepress/enhanceApp.js
文件,中文路由依然不能正常跳转我这边是1.5.7,明早 我跑1.6.10看看ε(*・ω・)_/゚:・☆
请问 1.6.10 可以吗
刚试了一下,也有问题,我是解决中文标签和分类用的
我去看看2.0的解决
我再debug看看中文路由的实际结果
2.0 是转成了 拼音 查看源码
1.6.10 使用拼音插件 vuepress-plugin-permalink-pinyin ,我发现配置如下永久链接不生效:
// 永久链接格式
permalink: "/:year/:month/:day/:slug",
刚看了一下,定位到bug原因了。明天抽空fix一下。
decode的会被重定向到encode的路由
encode的路由又会被钩子decode
所以就爆栈了 ,无法正常跳转
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 临时解决方案可以用下面这个,亲测没问题了,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"
报错 信息一样 原因应该差不都
晚点抽空看看这个
解决了 也是 无限重定向的问题 详见 commit vuepress-reco/vuepress-theme-reco@6e2775d
在你的仓库中的话可以 迭代一下
.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
}
}
在你的仓库中的话可以 迭代一下
.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 } }
经过测试已经成功解决了这个问题