解决keepAlive缓存设置

src/views/Played.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, reactive, h, watch, toRaw } from "vue";
+import { ref, reactive, h, watch, toRaw, onUnmounted } from "vue";
 import {
   RouterLink,
   useRoute,
@@ -27,6 +27,11 @@ import dayjs from 'dayjs'
 import 'dayjs/locale/zh-cn'
 import pubsub from "pubsub-js";
 
+console.log('Played 初始化');
+onUnmounted(() => {
+  console.log('Played 卸载');
+})
+
 const menuOptions = [
   {
     label: "最近播放",

src/views/common/MainMenu.vue

@@ -65,32 +65,32 @@ const menuOptions = ref([
     icon: renderIcon(ZuiJin),
   },
   //#region 其他
-  // {
-  //   label: () =>
-  //     h(
-  //       RouterLink,
-  //       {
-  //         to: {
-  //           path: '/fm'
-  //         }
-  //       },
-  //       { default: () => '私人FM' }
-  //     ),
-  //   key: '/fm',
-  // },
-  // {
-  //   label: () =>
-  //     h(
-  //       RouterLink,
-  //       {
-  //         to: {
-  //           path: '/friends'
-  //         }
-  //       },
-  //       { default: () => '朋友' }
-  //     ),
-  //   key: '/friends',
-  // },
+  {
+    label: () =>
+      h(
+        RouterLink,
+        {
+          to: {
+            path: '/fm'
+          }
+        },
+        { default: () => '私人FM' }
+      ),
+    key: '/fm',
+  },
+  {
+    label: () =>
+      h(
+        RouterLink,
+        {
+          to: {
+            path: '/friends'
+          }
+        },
+        { default: () => '朋友' }
+      ),
+    key: '/friends',
+  },
   //#endregion
 ]);
 

src/views/common/PlayingList.vue

@@ -0,0 +1,158 @@
+<script setup>
+import { ref, reactive, h, watch, toRaw } from "vue";
+import {
+  RouterLink,
+  useRoute,
+  useRouter,
+} from "vue-router";
+import { useStore } from "vuex";
+import {
+  NButton,
+  NButtonGroup,
+  NSpace,
+  NIcon,
+  NMenu,
+  NLayout,
+  NLayoutHeader,
+  NLayoutFooter,
+  NLayoutContent,
+  NLayoutSider,
+  NTag,
+  NDataTable,
+  useMessage,
+} from "naive-ui";
+import Play from "@/assets/svgs/Play_.svg";
+import Add from "@/assets/svgs/Add.svg";
+import dayjs from "dayjs";
+import "dayjs/locale/zh-cn";
+import pubsub from "pubsub-js";
+
+const store = useStore();
+const playingList = ref([])
+
+const createColumns = ({ play ,singerInfo }) => {
+  return [
+    {
+      title: "",
+      key: "index",
+      align: "right",
+      width: 20
+    },
+    {
+      title: "音乐标题",
+      key: "name",
+      align: "left",
+      ellipsis: true,
+      render(row){
+        return h(
+            NButton,
+            {
+              style: {
+                marginRight: "6px",
+              },
+              text: true,
+              size: "small",
+              onClick: () => play(row.id),
+            },
+            {
+              default: () => row.name,
+            }
+          );
+      }
+    },
+    {
+      title: "歌手",
+      key: "artists",
+      ellipsis: true,
+      render(row) {
+        const ars = row.artists.map((ar, idx) => {
+          let r = h(
+            NButton,
+            {
+              style: {
+                marginRight: "6px",
+              },
+              text: true,
+              size: "small",
+              onClick: () => singerInfo(ar.id),
+            },
+            {
+              default: () => ar.name,
+            }
+          );
+          return h("span", [idx == 0 ? "" : "/  ", r]);
+        });
+        // console.log(ars);
+        return ars;
+      },
+    },
+    {
+      title: "播放时间",
+      key: "date",
+      width: 100,
+      render(row){
+        return h('span', [dayjs(row.date).format('YYYY-MM-DD')])
+      }
+    },
+  ];
+};
+
+const columns = createColumns({
+  play(id){
+    pubsub.publish('zp.play', {id, im:true})
+  },
+  singerInfo(id) {
+    router.push("/singer/" + id);
+  },
+});
+
+// watch(
+//   () => store.state.settings.playingList,
+//   (val, oldVal) => {
+//     playingList.value = toRaw(store.state.settings.playingList)
+//   },
+//   {
+//     immediate: true,
+//     deep: true,
+//   }
+// );
+
+</script>
+
+<template>
+  <n-layout>
+    <n-layout-header
+      style="padding: 6px 12px 0px 12px; font-size: 24px"
+      >当前播放
+    </n-layout-header>
+    <n-layout has-sider>
+      <n-layout-content
+        style="padding: 6px 12px; font-size: 12px"
+      >
+        共{{ playingList }}首
+      </n-layout-content>
+      <n-layout-sider width="100" style="padding: 0 12px 6px 12px">
+        <n-button size="tiny">清除列表</n-button>
+      </n-layout-sider>
+    </n-layout>
+  </n-layout>
+  <n-data-table
+    :bordered="false"
+    :single-line="true"
+    :columns="columns"
+    :data="playingList"
+    size="tiny"
+  />
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="less" scoped>
+.n-layout-header,
+.n-layout-content,
+.n-layout-side {
+  // background-color: #eee;
+}
+</style>

src/views/common/SongCtrl.vue

@@ -51,7 +51,7 @@ const onEnd = () => {
   console.log("onEnd");
 };
 
-const play = async (id, im = true) => {
+const play = async (id, name, im = true) => {
   console.log(id);
   await getSongUrl(id)
     .then((res) => {
@@ -127,7 +127,7 @@ watch(playing, (val, old) => {
 const psToken = pubsub.subscribe("zp", (msg, data) => {
   switch (msg) {
     case "zp.play":
-      play(data.id, data.im);
+      play(data.id, data.name, data.im);
       break;
     case "zp.setProgressScale":
       setProgressScale(data.scale);

src/views/discover/Anchor.vue

@@ -0,0 +1,13 @@
+<template>
+  
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/discover/Discover.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { h, ref, onMounted, onUnmounted } from "vue";
+import { h, ref, onMounted, onUnmounted, onActivated } from "vue";
 import {
   RouterLink,
   useRoute,
@@ -16,6 +16,14 @@ import {
   NScrollbar,
 } from "naive-ui";
 
+console.log('Discove 初始化');
+onUnmounted(() => {
+  console.log('Discove 卸载');
+})
+// onActivated(()=>{
+//   console.log('Discove Actived');
+// })
+
 const menuOptions = [
   {
     label: () =>
@@ -109,13 +117,20 @@ const route = useRoute();
     />
   </div>
   <div class="main-content">
+    <!-- <input type="text"> -->
     <!-- <NScrollbar > -->
-      <div class="ld-width">
+    <div class="ld-width">
+      <router-view v-slot="{ Component }">
         <keep-alive>
-          <router-view  />
+          <component :is="Component" />
         </keep-alive>
-        
-      </div>
+      </router-view>
+      <!-- <keep-alive>
+        <router-view></router-view>
+      </keep-alive> -->
+      <!-- <router-view>
+      </router-view> -->
+    </div>
     <!-- </NScrollbar> -->
   </div>
 </template>
@@ -129,5 +144,4 @@ export default {
 };
 </script>
 
-<style lang="less" scoped>
-</style>
+<style lang="less" scoped></style>

src/views/discover/Latest.vue

@@ -0,0 +1,13 @@
+<template>
+  
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/discover/Ranking.vue

@@ -0,0 +1,13 @@
+<template>
+  
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/discover/Recommend.vue

@@ -217,8 +217,10 @@ import {
 import pubsub from "pubsub-js";
 import ArtistsSpan from "@/components/ArtistsSpan.vue";
 
-// console.log("recommend 初始化");
-
+console.log("recommend 初始化");
+onUnmounted(() => {
+  console.log('recommend 卸载');
+})
 const store = useStore();
 
 const play = (id) => {
@@ -235,6 +237,7 @@ getBanner(0)
       banners: { data: banners.value, time: Date.now() },
     });
     // console.log(banners.value);
+    console.log("recommend 轮播图片初始化");
   })
   .catch((err) => {
     console.log("getBanner err", err);

src/views/discover/Singer.vue

@@ -0,0 +1,13 @@
+<template>
+  
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/discover/Songlist.vue

@@ -0,0 +1,13 @@
+<template>
+  
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/fm/FM.vue

@@ -1,10 +1,15 @@
+<script setup>
+console.log('FM 初始化');
+</script>
+
 <template>
   FM
 </template>
 
 <script>
-export default {
 
+export default {
+  name: 'FM'
 }
 </script>
 

src/views/friends/Friends.vue

@@ -1,10 +1,15 @@
+<script setup>
+console.log('Friends 初始化');
+</script>
+
 <template>
   朋友
 </template>
 
 <script>
-export default {
 
+export default {
+  name: 'Friends',
 }
 </script>
 

src/views/videos/MV.vue

@@ -0,0 +1,13 @@
+<template>
+  
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/videos/V.vue

@@ -0,0 +1,13 @@
+<template>
+  
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/videos/Videos.vue

@@ -1,8 +1,13 @@
 <script setup>
-import { h } from "vue";
+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: () =>
@@ -29,11 +34,10 @@ const menuOptions = [
         { default: () => "MV" }
       ),
     key: "/videos/mv",
-  }
+  },
 ];
 
-const route = useRoute()
-
+const route = useRoute();
 </script>
 <template>
   <div class="top-menu">
@@ -44,14 +48,14 @@ const route = useRoute()
       :value="route.path"
     />
   </div>
-  <router-view />
+  <router-view v-slot="{ Component }">
+    <keep-alive>
+      <component :is="Component" />
+    </keep-alive>
+  </router-view>
 </template>
 <script>
-export default {
-
-}
+export default {};
 </script>
 
-<style>
-
-</style>
+<style></style>