vue3 router hidden属性

在 Vue Router 中，你可以使用路由的 meta 字段来添加自定义属性，以控制菜单的隐藏。

下面是一个示例：

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: Home,
    meta: {
      hidden: false // 默认显示菜单
    }
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: {
      hidden: true // 隐藏菜单
    }
  },
  // 其他路由配置...
]

在上面的示例中，我们定义了两个路由 `/home` 和 `/about`，并在它们的 meta 字段中添加了一个名为 `hidden` 的属性。通过设置 `hidden` 的值为 `true` 或 `false`，可以控制菜单的显示与隐藏。

然后，在菜单组件中，你可以通过遍历路由配置来决定是否展示对应的菜单项。例如：

<template>
  <div>
    <ul>
      <li v-for="route in routes" :key="route.name" v-if="!route.meta.hidden">
        {{ route.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import { routes } from './router'

export default {
  data() {
    return {
      routes: routes
    }
  }
}
</script>

在上述示例中，我们使用 `v-for` 遍历路由配置，并通过 `v-if` 判断当前路由的 `hidden` 属性是否为 `false`，来决定是否展示菜单项。

这样，当路由的 `hidden` 属性为 `true` 时，对应的菜单项就会被隐藏。