解决keepAlive缓存设置

src/App.vue

@@ -11,8 +11,10 @@ import SongInfo from "./views/common/SongInfo.vue";
 import SongCtrl from "./views/common/SongCtrl.vue";
 import SongStatus from "./views/common/SongStatus.vue";
 import SongProgress from "@/views/common/SongProgress.vue";
+import PlayingList from "@/views/common/PlayingList.vue";
 import pubsub from "pubsub-js";
 import { NConfigProvider, darkTheme } from "naive-ui";
+import router from "./router";
 // import { CloudCircleSharp } from "@vicons/ionicons5";
 
 const store = useStore();
@@ -34,6 +36,8 @@ const store = useStore();
 store.commit("loadSettings");
 store.commit("loadCaches");
 
+router.replace('/discover/recommend')
+
 const showPlaying = ref(false); //是否显示播放列表
 
 //处理route消息
@@ -68,7 +72,6 @@ onUnmounted(() => {
 
 <template>
   <n-config-provider
-    theme
     :theme-overrides="store.state.theme.themeOverrides"
   >
     <div id="wp">
@@ -81,15 +84,33 @@ onUnmounted(() => {
       </div>
       <div id="content">
         <div id="side">
-          <Personal></Personal>
+          <!-- <Personal></Personal> -->
           <MainMenu></MainMenu>
         </div>
         <div id="main">
-          <router-view />
+          <router-view v-slot="{ Component, route }">
+            <keep-alive exclude="FM,Friends">
+              <component :is="Component" />
+            </keep-alive>
+          </router-view>
+          <!-- <router-view v-slot="{ Component, route }">
+            <keep-alive v-if="route.meta.keepAlive">
+              <component :is="Component" />
+            </keep-alive>
+            <component :is="Component" v-else />
+          </router-view> -->
+          <!-- <router-view>
+          </router-view> -->
         </div>
       </div>
-      <div id="wpPlaying" v-show="showPlaying" @click.self="showPlaying = false">
+      <div
-        <div id="playing"></div>
+        id="wpPlayingList"
+        v-show="showPlaying"
+        @click.self="showPlaying = false"
+      >
+        <div id="playingList">
+          <PlayingList />
+        </div>
       </div>
       <div id="footer">
         <div id="songDetail"></div>
@@ -174,23 +195,25 @@ body {
       padding: 6px;
     }
   }
-  #wpPlaying {
+  #wpPlayingList {
     position: absolute;
     left: 0;
     top: 0;
     right: 0;
     bottom: 0;
 
-
+    #playingList {
-    #playing {
       position: absolute;
       top: 40px;
       right: 0;
       bottom: 64px;
       // left: 0;
-      width: 600px;
+      width: 500px;
       background-color: #f6f6f6;
       z-index: 1000;
+      border: #ddd solid 1px;
+      // border-top-left-radius: 8px;
+      // border-bottom-left-radius: 8px;
     }
   }
 

src/router/index.js

@@ -3,24 +3,30 @@ import pubsub from 'pubsub-js'
 import Home from "../views/Home.vue";
 
 const routes = [
-  {
+  // {
-    path: "/",
+  //   path: "/",
-    redirect: "/discover/recommend",
+  //   redirect: "/discover/recommend",
-    name: "index",
+  //   name: "index",
-    component: ()=> import('@/views/Home.vue'),
+  //   // component: ()=> import('@/views/Home.vue'),
-    meta:{
+  //   // meta:{
-      title:'zmusic',
+  //   //   title:'zmusic',
-    }
+  //   // }
-  },
+  // },
   {
     path: "/discover",
     name: "discover",
     component: ()=> import('../views/discover/Discover.vue'),
+    meta:{
+      keepAlive: true,
+    },
     children:[
       {
         path: "recommend",
         name: "discover.recommend",
         component: ()=> import('@/views/discover/Recommend.vue'),
+        meta:{
+          keepAlive: true,
+        },
       },
       {
         path: "songlist",
@@ -58,6 +64,9 @@ const routes = [
     path: "/videos",
     name: "videos",
     component: ()=> import('../views/videos/Videos.vue'),
+    meta:{
+      keepAlive: true,
+    },
     children: [
       {
         path: "v",
@@ -75,6 +84,9 @@ const routes = [
     path: "/played",
     name: "played",
     component: ()=> import('@/views/Played.vue'),
+    meta:{
+      keepAlive: true,
+    },
   },
   {
     path: "/friends",

src/store/index.js

@@ -8,6 +8,7 @@ export default createStore({
       currentRoute: "/discover/recommend", //当前路由
       songId: 0, //歌曲id
       lastPlayed: [], //最近播放
+      playingList: [], //当前播放
     },
     caches: {},
     theme: {

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: () =>
+    label: () =>
-  //     h(
+      h(
-  //       RouterLink,
+        RouterLink,
-  //       {
+        {
-  //         to: {
+          to: {
-  //           path: '/fm'
+            path: '/fm'
-  //         }
+          }
-  //       },
+        },
-  //       { default: () => '私人FM' }
+        { default: () => '私人FM' }
-  //     ),
+      ),
-  //   key: '/fm',
+    key: '/fm',
-  // },
+  },
-  // {
+  {
-  //   label: () =>
+    label: () =>
-  //     h(
+      h(
-  //       RouterLink,
+        RouterLink,
-  //       {
+        {
-  //         to: {
+          to: {
-  //           path: '/friends'
+            path: '/friends'
-  //         }
+          }
-  //       },
+        },
-  //       { default: () => '朋友' }
+        { default: () => '朋友' }
-  //     ),
+      ),
-  //   key: '/friends',
+    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>
-        
+      </router-view>
-      </div>
+      <!-- <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 lang="less" scoped></style>
-</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>