feat: 添加小说详情页

src/components/common/Header.vue

@@ -1,34 +1,9 @@
  <template>
   <div class="header">
-    <div class="topBar" style="display: none">
-      <div class="box_center cf">
-        <div class="top_l">
-          <a href="/" class="on">小说精品屋</a><i class="line">|</i
-          ><a href="/?m=2">手机女生版</a><i class="line">|</i
-          ><a href="/?m=1">手机男生版</a><i class="line">|</i
-          ><a href="/">客户端下载</a>
-        </div>
-        <div class="top_r">
-          <div class="top_nearread">
-            <a
-              href="javascript:void(0);"
-              class="nearread"
-              id="headerUserHistoryBtn"
-              >最近阅读<i class="icon_down"></i
-            ></a>
-            <div
-              class="book_record"
-              style="display: none"
-              id="headerUserHistory"
-            ></div>
-          </div>
-          <span> </span>
-        </div>
-      </div>
-    </div>
+   
     <div class="topMain">
       <div class="box_center cf">
-        <a href="/?m=2" class="logo fl"><img :src="logo" alt="小说精品屋" /></a>
+        <a href="/" class="logo fl"><img :src="logo" alt="小说精品屋" /></a>
         <div class="searchBar fl">
           <div class="search cf">
             <input

src/components/home/BookNewestRank.vue

@@ -13,13 +13,16 @@
           >
             <div class="book_name">
               <i>{{ index + 1 }}</i
-              ><a class="name" href="/book/1334317855974465536.html">{{
-                item.bookName
-              }}</a>
+              ><a
+                class="name"
+                href="javascript:void(0)"
+                @click="bookDetail(item.id)"
+                >{{ item.bookName }}</a
+              >
             </div>
             <div class="book_intro">
               <div class="cover">
-                <a href="/book/1334317855974465536.html"
+                <a href="javascript:void(0)" @click="bookDetail(item.id)"
                   ><img
                     :src="`${imgBaseUrl}` + `${item.picUrl}`"
                     :alt="item.bookName"
@@ -28,7 +31,8 @@
               </div>
               <a
                 class="txt"
-                href="/book/1334317855974465536.html"
+                href="javascript:void(0)"
+                @click="bookDetail(item.id)"
                 v-html="item.bookDesc"
               ></a>
             </div>
@@ -44,10 +48,13 @@
 
 <script>
 import { reactive, toRefs, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
 import { listNewestRankBooks } from "@/api/book";
 export default {
   name: "BookNewestRank",
   setup() {
+    const route = useRoute();
+    const router = useRouter();
     const state = reactive({
       books: [],
       imgBaseUrl: process.env.VUE_APP_BASE_IMG_URL,
@@ -62,9 +69,12 @@ export default {
         }
       });
     });
-
+    const bookDetail = (bookId) => {
+      router.push({ path: `/book/${bookId}` });
+    };
     return {
       ...toRefs(state),
+      bookDetail,
     };
   },
 };

src/components/home/BookUpdateRank.vue

@@ -18,13 +18,13 @@
           <tbody id="newRankBooks2">
             <tr v-for="(item, index) in booksList" :key="index">
               <td class="style">
-                <a href="book/bookclass.html?c=1">[{{ item.categoryName }}]</a>
+                <a href="javascript:void(0)" @click="bookDetail(item.id)">[{{ item.categoryName }}]</a>
               </td>
               <td class="name">
-                <a href="/book/1334337530296893441.html">{{ item.bookName }}</a>
+                <a href="javascript:void(0)" @click="bookDetail(item.id)">{{ item.bookName }}</a>
               </td>
               <td class="chapter">
-                <a href="/book/1334337530296893441.html">{{
+                <a href="javascript:void(0)" @click="bookDetail(item.id)">{{
                   item.lastChapterName
                 }}</a>
                 <i class=""></i>
@@ -52,13 +52,13 @@
             >
               <div class="book_name">
                 <i>{{ index + 1 }}</i
-                ><a class="name" href="/book/1334317855974465536.html">{{
+                ><a class="name" href="javascript:void(0)" @click="bookDetail(item.id)">{{
                   item.bookName
                 }}</a>
               </div>
               <div class="book_intro">
                 <div class="cover">
-                  <a href="/book/1334317855974465536.html"
+                  <a href="javascript:void(0)" @click="bookDetail(item.id)"
                     ><img
                       :src="`${imgBaseUrl}` + `${item.picUrl}`"
                       :alt="item.bookName"
@@ -67,7 +67,7 @@
                 </div>
                 <a
                   class="txt"
-                  href="/book/1334317855974465536.html"
+                  href="javascript:void(0)" @click="bookDetail(item.id)"
                   v-html="item.bookDesc"
                 ></a>
               </div>
@@ -84,10 +84,13 @@
 
 <script>
 import { reactive, toRefs, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
 import { listUpdateRankBooks } from "@/api/book";
 export default {
   name: "BookUpdateRank",
   setup() {
+    const route = useRoute();
+    const router = useRouter();
     const state = reactive({
       booksRank: [],
       booksList: [],
@@ -104,8 +107,12 @@ export default {
       });
     });
 
+    const bookDetail = (bookId) => {
+      router.push({ path: `/book/${bookId}` });
+    };
     return {
       ...toRefs(state),
+      bookDetail,
     };
   },
 };

src/components/home/BookVisitRank.vue

@@ -9,20 +9,20 @@
               <li v-for="(item,index) in books" :key="index" :class="['num' + (Number(`${index}`) + 1), { on: index == 0 }]">
                <div class="book_name">
                 <i>{{ index + 1 }}</i
-                ><a class="name" href="/book/1334317855974465536.html">{{
+                ><a class="name" href="javascript:void(0)" @click="bookDetail(item.id)">{{
                   item.bookName
                 }}</a>
               </div>
               <div class="book_intro">
                 <div class="cover">
-                  <a href="/book/1334317855974465536.html"
+                  <a href="javascript:void(0)" @click="bookDetail(item.id)"
                     ><img
                       :src="`${imgBaseUrl}` + `${item.picUrl}`"
                       :alt="item.bookName"
                       onerror="this.src='https://cdn.jsdelivr.net/gh/201206030/CDN/images/default.gif';this.onerror=null"
                   /></a>
                 </div>
-                <a class="txt" href="/book/1334317855974465536.html" v-html="item.bookDesc"></a>
+                <a class="txt" href="javascript:void(0)" @click="bookDetail(item.id)" v-html="item.bookDesc"></a>
               </div>
              
               </li>
@@ -38,10 +38,13 @@
 
 <script>
 import { reactive, toRefs, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
 import { listVisitRankBooks } from "@/api/book";
 export default {
   name: "BookVisitRank",
   setup() {
+    const route = useRoute();
+    const router = useRouter();
     const state = reactive({
       books: [],
       imgBaseUrl: process.env.VUE_APP_BASE_IMG_URL
@@ -61,8 +64,12 @@ export default {
       
     });
 
+    const bookDetail = (bookId) => {
+      router.push({ path: `/book/${bookId}` });
+    };
     return {
       ...toRefs(state),
+      bookDetail,
     };
   },
 };