vue router hidden

如果您想在 Vue Router 中隐藏某些路由，可以使用以下两种方法：

1.使用 meta 字段：

您可以在路由配置中添加一个 meta 属性，例如：hidden:true。这样，在渲染菜单时，可以根据这个值来决定是否显示该路由。

例如：

const router = new VueRouter({
  routes: [
    {
      path: "/",
      name: "Home",
      component: Home,
      meta: {
        hidden: true
      }
    },
    {
      path: "/about",
      name: "About",
      component: About
    }
  ]
});

然后，在菜单组件中可以这样使用：

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

2.使用嵌套路由：

您可以将需要隐藏的路由作为另一个路由的子路由，然后在菜单组件中只显示父级路由。这样，当用户访问父级路由时，子路由将会渲染。

例如：

const router = new VueRouter({
  routes: [
    {
      path: "/",
      name: "Home",
      component: Home,
      children: [
        {
          path: "hidden",
          name: "Hidden",
          component: Hidden
        }
      ]
    },
    {
      path: "/about",
      name: "About",
      component: About
    }
  ]
});

然后，在菜单组件中可以这样使用：

<template>
  <div>
    <ul>
      <li>
        <router-link to="/">Home</router-link>
        <ul v-if="$route.path === '/'">
          <li>
            <router-link to="/hidden">Hidden</router-link>
          </li>
        </ul>
      </li>
      <li>
        <router-link to="/about">About</router-link>
      </li>
    </ul>
  </div>
</template>

以上两种方法都可以实现隐藏路由的效果，具体使用哪一种取决于您的实际需求。