vue3中点三级路由菜单隐藏一二级路由只展示三级路由怎么实现
时间: 2023-07-18 08:40:24 浏览: 172
在Vue3中,可以通过动态路由匹配和嵌套路由实现三级路由菜单隐藏一二级路由只展示三级路由的功能。
首先,在父级路由的component中,可以使用`<router-view>`标签来渲染嵌套的子路由组件。然后,通过在子路由中设置`path`属性来定义子路由的路径,同时在`meta`中定义该路由的层级关系,例如:
```javascript
const routes = [
{
path: '/',
component: Home,
children: [
{
path: 'level1',
component: Level1,
meta: { level: 1 },
children: [
{
path: 'level2',
component: Level2,
meta: { level: 2 },
children: [
{
path: 'level3',
component: Level3,
meta: { level: 3 }
}
]
},
{
path: 'level3',
component: Level3,
meta: { level: 3 }
}
]
},
{
path: 'level2',
component: Level2,
meta: { level: 2 },
children: [
{
path: 'level3',
component: Level3,
meta: { level: 3 }
}
]
},
{
path: 'level3',
component: Level3,
meta: { level: 3 }
}
]
}
]
```
在上面的代码中,`meta`中的`level`属性表示该路由的层级关系,数字越大表示层级越深。然后,在父级路由的component中,可以通过遍历路由表,根据`meta`中的`level`属性来动态生成菜单,例如:
```html
<template>
<div>
<ul>
<li v-for="menu in menus">{{ menu.name }}</li>
</ul>
<router-view/>
</div>
</template>
<script>
import { useRoute, useRouter } from 'vue-router'
export default {
setup() {
const route = useRoute()
const router = useRouter()
const menus = router.options.routes
.filter(r => r.meta && r.meta.level === 3)
.map(r => {
return {
name: r.path,
path: r.path,
active: route.path.startsWith(r.path)
}
})
return {
menus
}
}
}
</script>
```
在上面的代码中,通过`useRouter`和`useRoute`获取当前路由信息和路由对象,然后遍历路由表,根据`meta`中的`level`属性来动态生成菜单,同时根据当前路由的路径和菜单的路径来判断菜单是否激活。这样就可以实现点三级路由菜单隐藏一二级路由只展示三级路由的功能。
阅读全文