在 Vue 路由中，通过设置 hidden 属性为 true 可隐藏路由，隐藏后路由将不再显示在导航栏或侧边栏中。隐藏单个路由或一组路由时，直接在路由数组中设置 hidden 属性即可。利用 meta 字段，还可以根据特定条件动态隐藏路由。隐藏的路由仍可通过直接输入 URL 访问，不会影响路由守卫或导航钩子。
Vue 路由隐藏功能
如何隐藏 Vue 路由？
在 Vue 路由中隐藏路由可以通过设置 hidden 属性。当 hidden 设置为 true 时，该路由将不会在导航栏或侧边栏等菜单中显示。
隐藏单个路由
立即学习“前端免费学习笔记（深入）”；
const routes = [
{
path: '/dashboard',
name: 'Dashboard',
component: Dashboard,
hidden: true
}
]隐藏一组路由
const routes = [
{
path: '/admin',
name: 'Admin',
component: Admin,
children: [
{
path: '/users',
name: 'Users',
component: Users
},
{
path: '/roles',
name: 'Roles',
component: Roles
},
{
path: '/permissions',
name: 'Permissions',
component: Permissions,
hidden: true
}
]
}
]动态隐藏路由
有时，你可能需要根据某些条件来动态隐藏路由。可以使用 meta 字段来实现此目的：
const routes = [
{
path: '/dashboard',
name: 'Dashboard',
component: Dashboard,
meta: { hidden: computedValue }
}
]其中 computedValue 是一个计算属性，它会根据条件返回 true 或 false。
注意：
- 隐藏路由仍然可以被访问，只需直接输入该路由的 URL 即可。
- 隐藏路由不会影响路由守卫或导航钩子。
