可组合函数
useContentHelpers()
与导航对象交互的帮助程序。
用法
<script setup lang="ts">
const {
navBottomLink,
navDirFromPath,
navPageFromPath,
navKeyFromPath
} = useContentHelpers()
</script>
了解更多关于 导航对象。
navBottomLink()
获取导航节点,并解析该节点的第一个可用路径。
它对于构建嵌套导航系统非常有用。
<script setup>
const { navBottomLink } = useContentHelpers()
const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
const path = navBottomLink(navigation.value)
</script>
navDirFromPath()
此函数将获取路径,并解析该路径的第一个可用导航节点。
它对于查找导航节点的当前目录非常有用。
<script setup>
const route = useRoute()
const { navDirFromPath } = useContentHelpers()
const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
const dir = navDirFromPath(route.path, navigation.value)
</script>
navPageFromPath()
此函数将获取路径,并解析该路径的第一个可用导航页面。
它对于查找当前正在浏览的页面的导航节点非常有用。
<script setup>
const route = useRoute()
const { navPageFromPath } = useContentHelpers()
const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
const page = navPageFromPath(route.path, navigation.value)
</script>
navKeyFromPath()
此函数将获取路径,并解析该路径的特定键。
当您想要在页面的 _dir.yml
键值上添加回退时,它非常有用。
<script setup>
const route = useRoute()
const { navKeyFromPath } = useContentHelpers()
const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
const layout = navKeyFromPath(route.path, 'layout', navigation.value)
</script>