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

新答案（受@Linkontoask启发）

<template>
    <div class="table">
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: 'table-box'
};
</script>

<table-box>

| name | age |
|------|-----|
| Link | 18  |

</table-box>

标签和md的表格头要保留空行，否则会出错。这种写法的优势是在编辑器或者仓库中查看md文件时标签不被显示，从而不干扰阅读。

---

旧答案
主流浏览器使用：MutationObserver，IE 10 采用 MutationEvent。
监听window.document的子树变化即可，无需理会路由。

Answer 2

楼主实现方法问题太大了，md文件都已经渲染成dom元素之后再去操作dom，对性能有一定的影响。我给一个实现方案吧，使用了Vue就尽量不要去操作原生DOM。

在 .vuepress/components 文件夹下编写一个公共组件，名字叫 div-box.vue。内容如下

<template>
  <div class="table-box">
    <Content :slot-key="_id"></Content>
  </div>
</template>

<script>
  export default {
    name: "divBox",
    props: {
      _id: {
        type: String,
        required: true
      }
    }
  }
</script>

<style scoped>
.table-box {
  width: 100%;
  overflow-x: auto;
}
</style>

然后在md文件中添加如下内容即可

<div-box _id="tableAttributes"></div-box>

::: slot tableAttributes
| name | age |
| Link | 18 |
:::

在需要添加 div 标签的地方使用 ::: slot xxx 就可以了，_id 是为了区别哪一个 slot

打一波广告

---

v-easy-components是一款基于vue2.0的组件/指令库

Answer 3

$nextTick