时光绘梦集

vitepress是一个单页应用

vitepress框架在加载的时候感觉还是挺快的，重要是点击链接感觉很快，刚开始我还没发现，后来经过我的研究才发现。

原理应该就是初次快速加载当前页面，然后后台把整个网站数据全部缓存下来，点击站内链接直接使用缓存加载，然后更新路径，更新内容。

这样的话有好处也有坏处，好处加载快，坏处，我的统计代码只加载一次，后续使用缓存，没有发起新的页面请求，统计代码就会没有运行的机会。因为统计代码就是在页面加载时执行一次而已。

解决办法

vitepress内部有自己的路由，我们监听这个路由，这个路由更新的时候，再次调用统计代码运行就好了。

代码分享如下，后续有需求可再次查看。

添加统计代码

在config.js文件添加统计代码

位置在head配置内部，示例:

head: [
    ['script',{},`window._hmt = window._hmt || [];
    (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?hhhhhhh";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
    })();`]
]

这里注意原来的百度统计代码，普通变量要注册成window变量，不然后续无法再次调用。

监听路由变化

在主题下的index.js中添加监听，要在导出默认主题之前添加。

DefaultTheme.enhanceApp = ({ app, router, siteData }) => {
    router.onBeforeRouteChange = (to) => {
        if (typeof _hmt !== 'undefined') {
            _hmt.push(['_trackPageview', to]);
        }
    };
};