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