在 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。
注意：
以上就是vue路由怎么隐藏的详细内容，更多请关注php中文网其它相关文章！
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
500
