<script setup>
import { h, onUnmounted } from "vue";
import { RouterLink, useRoute } from "vue-router";
import { NButton, NSpace, NIcon, NMenu } from "naive-ui";

console.log("Videos 初始化");
onUnmounted(() => {
  console.log("Videos 卸载");
});

const menuOptions = [
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            path: "/videos/v",
          },
        },
        { default: () => "视频" }
      ),
    key: "/videos/v",
  },
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            path: "/videos/mv",
          },
        },
        { default: () => "MV" }
      ),
    key: "/videos/mv",
  },
];

const route = useRoute();
</script>
<template>
  <div class="top-menu">
    <n-menu
      :options="menuOptions"
      mode="horizontal"
      class="zm-top-menu"
      :value="route.path"
    />
  </div>
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>
<script>
export default {};
</script>

<style></style>
