vue3常见错误： Extraneous non-props attributes (class) were passed to component

在vue3开发过程中遇到的一些错误、警告，在此记录一下。 这次浏览器遇到了警告：main.js:16 [Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text or teleport root nodes.

浏览器控制警告：

情况：

在使用router-view的时候，在上面使用增加class属性，导致导航目标组件无法集成class属性：

<el-container class="container-container">
  <router-view ref="routerView" class="router-view-container" />
</el-container>

这里我在router-view上添加了一个类：router-view-container

导航目标组件：

<template>
  <div class="knowledge">
  </div>
  <div class="page-pagination">
  </div>
</template>

原因：

导航目标组件没有唯一根元素，导致router-view上class属性在目标组件上无法继承。将导航目标组件，改为有唯一根元素即可解决，如下：

<template>
  <div>
    <div class="knowledge">
    </div>
    <div class="page-pagination">
    </div>
  </div>
</template>