频道更改：跳转不同频道

vueHomilyLink/src/router/index.js

@@ -19,7 +19,8 @@ const router = createRouter({
       component: ClubView,
     },
     {
-      path: '/channel',
+      path: '/channel/:id?',
+      props: true,
       name: 'channel',
       component: ChannelView,
     },

vueHomilyLink/src/views/ChannelView.vue

@@ -1,13 +1,22 @@
 <script setup>
 import Nav from '@/components/Nav.vue';
 import { ref } from 'vue';
+import router from '@/router';
 
 //频道
+//获取传递的参数中的id
 const channel = ref();
 //加载频道信息
-function loadChannels(){
+function loadChannels(channelId){
     channel.value = {
-        id:1,
+        // id:1,
+        // image:"https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png",
+        // name:"量价时空四维预测术",
+        // // 订阅数量
+        // subscriptionCount:60,
+        // backgroundImage:"https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg",
+        // status:0
+        id:2,
         image:"https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png",
         name:"量价时空四维预测术",
         // 订阅数量
@@ -17,8 +26,15 @@ function loadChannels(){
     }
 }
 loadChannels();
-// 展示列表
-const shows = ref([])
+function toLink(channelId){
+  router.push({path:'/channel',query:{id: channelId}});
+  console.log(channelId);
+  loadChannels(channelId);
+  loadShows();
+}
+
+// 展示列表1
+const shows = ref([]);
 // 加载展示列表
 function loadShows(){
   shows.value = ([
@@ -123,10 +139,20 @@ loadShows();
 function submit(){
     
 }
+
+
 </script>
 
 <template>
     <Nav></Nav>
+    <div class="club-nav">
+        <div class="container">
+            <button @click="toLink(1)" class="nav-item">量价时空四维预测术</button>
+            <button @click="toLink(2)" class="nav-item">云板&左侧频道</button>
+            <button @click="toLink(3)" class="nav-item">HomilyChart第一频道</button>
+            <button @click="toLink(4)" class="nav-item">TD频道</button>
+        </div>
+    </div>
     <div class="channel">
         <div class="channel-head">
             <!-- 1-订阅按钮 -->
@@ -192,6 +218,50 @@ function submit(){
     </div>
 </template>
 <style scoped>
+.club-nav {
+  height: 100vh; 
+  position: fixed;
+  left: 30px;
+  top: 30px;
+  background-color: #ffffff; 
+  overflow-x: hidden; 
+  padding-top: 20px; 
+  transition: 0.5s; 
+}
+
+
+.container {
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+  background-color: #ffffff; 
+}
+
+
+.nav-item {
+  border: none;
+  background-color: #ffffff; 
+  padding: 10px 15px;
+  width: 250px;
+  height: 60px;
+  text-decoration: none;
+  font-size: 18px;
+  color: rgb(19, 18, 18);
+  display: block;
+  transition: 0.3s;
+}
+
+
+.nav-item:hover {
+  background-color: #407fdf; 
+  color: #f1f1f1; 
+}
+
+.nav-item.router-link-active {
+  background-color: #407fdf; 
+  color: white; 
+  border-radius: 5%;
+}
 .channel{
     width: 800px;
     margin-left: auto;