vuepress 怎么监听路由跳转后页面渲染完成？

Question

场景：vuepress的markdown表格写法很方便，但样式很不友好，我希望markdown写法渲染的表格宽度对齐，内容不强制换行，表格外层溢出有滚动条。

为了实现这个目标，需要做2步操作：

①设置table样式宽度100%，格子内容不强制换行。

②溢出的处理需要在表格外层套个div，设置overflow实现。

第①通过修改样式即可，第②需要通过js去操作dom才能实现。

那么问题来了，第②的操作需要在什么时机执行呢，当页面渲染完毕的时候，怎么监听这一事件？

路由一旦改变，页面的内容就会刷新，却没有触发window.onload事件，因为vuepress是单页面的，通过加载js文件来渲染局部内容。我希望能在一个入口处，统一设置，执行第②的操作。

目前做法，在enhanceApp.js中监听路由改变，虽然该做法可以实现功能，但不保险，setTimeout不一定会赶在页面渲染完毕之后。

export default ({router}) => {

    router.beforeEach((to, from, next) => {

        next();

        setTimeout(()=>{

            let tables = document.querySelectorAll('#app > .theme-container > .page > .content > table');

            tables && Array.from(tables).forEach(table =>{

                table.outerHTML = `<div class="table">${table.outerHTML}</div>`;

            });

        })

    })

};

Answer 1

$nextTick