接触Vue以来,觉得Vue的文档不太友好,知识点太碎片化,可能一个重要的知识点仅仅在文中提一下,但不会出现在索引中。文档读起来也比较晦涩。

有一个router-view

<router-view class="content"></router-view>

假设下面的组件会渲染到上面的router-view中:

<template>
    <div class="box">
        ...
    </div>
</template>

最终生成的HTML元素会包含router-view本身的class和渲染到它里面的组件根元素的class

<div data-v-c1f1971a data-v-7ba5bd90 class="box content">
    ...
</div>

出现data-v-c1f1971adata-v-7ba5bd90是因为router-view所在组件的style和渲染到它里面的组件的style都设置了scoped

通过这个例子可以知道,router-viewclass来自本身的class和渲染到它里面的组件的根元素的classrouter-view所在组件可以设置渲染到它里面的组件的根元素的样式。

这个知识点见过,但是刚才找了半天VueVue RouterVue-CLI的文档都没再次发现,真的是可遇而不可求啊。

标签: Vue Router