公用逻辑

管理模板还提供了一些公用逻辑以便于从管理模板中获取一些有用内容。

useNavPages 可组合项

该可组合项返回了系统中已注册的页面以及一些工具函数，用法示例如下：

<template>
  <div>current: {{ current?.title }}</div>
  <div v-for="page in pages">
    <nuxt-link :to="page.to">{{ page.title }}</nuxt-link>
  </div>
</template>

<script setup lang="ts">
const pages = useNavPages();
const { current, getPage, usePage } = pages;
</script>

useNavMenus 可组合项

该可组合项返回了系统中已注册的页面组成的菜单以及一些工具函数，用法示例如下：

<template>
  <div>current: {{ current }}</div>
  <div v-for="menu in menus">
    {{ menu }}
  </div>
</template>

<script setup lang="ts">
const menus = useNavMenus();
const { current, getMenus, useMenus } = menus;
</script>

useNavHistories 可组合项

该可组合项返回了系统中已打开的页面历史以及一些工具函数，用法示例如下：

<template>
  <div>current: {{ current }}</div>
  <button @click="close()">close current</button>
  <button @click="closeAll()">close all</button>
  <button @click="closeOthers()">close others</button>
  <div v-for="history in histories">
    <nuxt-link :to="history.to">{{ history.title }}</nuxt-link>
    <button @click="close(history)">close</button>
  </div>
</template>

<script setup lang="ts">
const histories = useNavHistories();
const { current, close, closeAll, closeOthers, open } = histories;
</script>
Edit this page on GitHub
Table of Contents