村农

莫笑农家腊酒浑,丰年留客足鸡豚。


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);
            });
        });
    }
}