我要评论vuepress锚点hash滚动scroll问题
问题描述
vuepress建立网站的某个URL如果带有锚点，如http://test/test-hash.html#hasherror，刷新该URL，并不能滑动到相应的hasherror锚点，或者打开新的带有锚点的链接不能跳到相应的地方。
研究调查
-
在vuepress的github issue中找到相关的问题——Initial load does not scroll to the heading referenced by the document hash
-
又在1的问题下发现关于中文hash需要解码（decodeURIComponent）的提示——中文在URL中会被转码，需要使用decodeURIComponent方法解码
解决方案
根据以上调查以及实践，解决方案如下：
在.vuepress文件夹下添加enhanceApp.js文件
export default ({ router }) => {
if(typeof process === 'undefined' || process.env.VUE_ENV !== 'server') {
router.onReady(() => {
const { app } = router;
app.$once("hook:mounted", () => {
setTimeout(() => {
const { hash } = document.location;
if (hash.length > 1) {
const id = decodeURIComponent(hash.substring(1));
const element = document.getElementById(id);
if (element) element.scrollIntoView();
}
}, 500);
});
});
}
}
注意：如果hash有中文，要加decodeURIComponent
本文地址：https://blog.csdn.net/sendudu/article/details/107368962
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论