Vue3.0中：TypeError: Cannot read properties of undefined (reading ‘hidden‘)

1、问题

<el-submenu index="1" v-for="(item,index) in this.$router.options.routes" :key="index" v-if="item.hidden">

报错：TypeError: Cannot read properties of undefined (reading ‘hidden’)

2、原因
3.x 版本中 v-if 总是优先于 v-for 生效。所有v-if还没有遍历出v-for内容

链接: link.

4、解决：使用计算属性

<el-menu router>
  <el-submenu index="1" v-for="(item,index) in activeRoute" :key="index">
    <template v-slot:title="title">
      <i class="el-icon-location"></i>
      <span>{{ item.name }}</span>
    </template>
    <el-menu-item-group>
      <el-menu-item :index="children.path" v-for="(children,index) in item.children">
        {{ children.name }}
      </el-menu-item>
    </el-menu-item-group>
  </el-submenu>
</el-menu>


computed: {
    activeRoute: function () {
      return this.$router.options.routes.filter(function (routes) {
        return routes.hidden
      })
    }
  },