优化跳转

components/Link.vue

+<template>
+  <div>
+    <template v-if="item.news">
+      <template v-if="item.news.data.source !== ''">
+        <a
+          :href="item.href"
+          target="_blank"
+          >
+          <slot />
+        </a>
+      </template>
+      <template v-else>
+        <nuxt-link :to="`${item.news.path}/${item.news.data.id}`"><slot /></nuxt-link>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  props: { item: { type: Object } },
+  mounted() {
+  }
+}
+</script>

components/home/banner.vue

@@ -3,7 +3,14 @@
     <div v-swiper:mySwiper="swiperOption" ref="mySwiper">
       <div class="swiper-wrapper">
         <div class="swiper-slide" v-for="(item, index) in listData" :key="index">
-          <img :src="item.photo_uri" @click="goPage(item)" />
+          <app-link :item="{
+            news: {
+              data: item,
+              path: '/news/hot'
+            }
+          }">
+            <img :src="item.photo_uri" />
+          </app-link>
         </div>
       </div>
       <!-- <div class="swiper-pagination swiper-pagination-bullets"></div> -->
@@ -13,9 +20,13 @@
   </div>
 </template>
 <script>
+import AppLink from '@/components/Link'
 const _this = this
 export default {
   name: 'banner',
+  components: {
+    AppLink
+  },
   data() {
     return {
       listData: [],

components/home/commonProblem.vue

@@ -2,52 +2,54 @@
   <div class="common-content-box">
     <m-title :data="titleParams" class="m-title"/>
     <div class="content-mian">
-      <div class="list-box" @click="$router.push({ path: '/apply/problem' })">
-        <ul>
-          <li>
-            <div class="icon"></div>
-            <div class="text">Kelley商学院毕业生颁发的学位证书与在美国颁发的证书有何不同？</div>
-          </li>
-          <li>
-            <div class="icon"></div>
-            <div class="text">本项目是上课形式是怎么样？</div>
-          </li>
-          <li>
-            <div class="icon"></div>
-            <div class="text">本项目学制多久？</div>
-          </li>
-          <li>
-            <div class="icon"></div>
-            <div class="text">能否顺利毕业拿到证书呢？</div>
-          </li>
-          <li>
-            <div class="icon"></div>
-            <div class="text">本项目是在职还是全职？</div>
-          </li>
-        </ul>
-        <ul>
-          <li>
-            <div class="icon"></div>
-            <div class="text">如何申请Kelley商学院金融学硕士？</div>
-          </li>
-          <li>
-            <div class="icon"></div>
-            <div class="text">大概流程是什么？</div>
-          </li>
-          <li>
-            <div class="icon"></div>
-            <div class="text">需要提交哪些材料？</div>
-          </li>
-          <li>
-            <div class="icon"></div>
-            <div class="text">美国印第安纳大学Kelley商学院金融学硕士的学费是多少？</div>
-          </li>
-          <li>
-            <div class="icon"></div>
-            <div class="text">学费可以分期吗？</div>
-          </li>
-        </ul>
-      </div>
+      <nuxt-link to="/apply/problem">
+        <div class="list-box">
+          <ul>
+            <li>
+              <div class="icon"></div>
+              <div class="text">Kelley商学院毕业生颁发的学位证书与在美国颁发的证书有何不同？</div>
+            </li>
+            <li>
+              <div class="icon"></div>
+              <div class="text">本项目是上课形式是怎么样？</div>
+            </li>
+            <li>
+              <div class="icon"></div>
+              <div class="text">本项目学制多久？</div>
+            </li>
+            <li>
+              <div class="icon"></div>
+              <div class="text">能否顺利毕业拿到证书呢？</div>
+            </li>
+            <li>
+              <div class="icon"></div>
+              <div class="text">本项目是在职还是全职？</div>
+            </li>
+          </ul>
+          <ul>
+            <li>
+              <div class="icon"></div>
+              <div class="text">如何申请Kelley商学院金融学硕士？</div>
+            </li>
+            <li>
+              <div class="icon"></div>
+              <div class="text">大概流程是什么？</div>
+            </li>
+            <li>
+              <div class="icon"></div>
+              <div class="text">需要提交哪些材料？</div>
+            </li>
+            <li>
+              <div class="icon"></div>
+              <div class="text">美国印第安纳大学Kelley商学院金融学硕士的学费是多少？</div>
+            </li>
+            <li>
+              <div class="icon"></div>
+              <div class="text">学费可以分期吗？</div>
+            </li>
+          </ul>
+        </div>
+      </nuxt-link>
       <div class="msg-box">
         <el-input
           type="textarea"

components/home/news.vue

@@ -2,18 +2,32 @@
   <div class="news-content-box">
     <m-title :data="titleParams" />
     <div class="content-box">
-      <div class="news-left" @click="goPage(listData.first)">
-        <img :src="listData.first.photo_uri" alt="" />
-        <div class="mantle-box">
-          <div class="tit">{{ listData.first.title }}</div>
-          <div class="con-txt">{{ listData.first.summary }}</div>
-        </div>
+      <div class="news-left">
+        <app-link :item="{
+            news: {
+              data: listData.first,
+              path: '/news/hot'
+            }
+          }">
+          <img :src="listData.first.photo_uri" alt="" />
+          <div class="mantle-box">
+            <div class="tit">{{ listData.first.title }}</div>
+            <div class="con-txt">{{ listData.first.summary }}</div>
+          </div>
+        </app-link>
       </div>
       <ul class="news-right">
-        <li v-for="(item, index) in listData.list" :key="index" @click="goPage(item)">
-          <div class="time">{{ item.created_time }}</div>
-          <div class="news-r-title">{{ item.title }}</div>
-          <div class="del">{{ item.summary }}</div>
+        <li v-for="(item, index) in listData.list" :key="index">
+          <app-link :item="{
+            news: {
+              data: listData.first,
+              path: '/news/hot'
+            }
+          }">
+            <div class="time">{{ item.created_time }}</div>
+            <div class="news-r-title">{{ item.title }}</div>
+            <div class="del">{{ item.summary }}</div>
+          </app-link>
         </li>
       </ul>
     </div>
@@ -21,10 +35,12 @@
 </template>
 <script>
 import mTitle from '../../components/home/moduleTitle'
+import AppLink from '@/components/Link'
 export default {
   name: 'news',
   components: {
-    mTitle
+    mTitle,
+    AppLink
   },
   async fetch() {
     const params = {

components/home/openClass.vue

@@ -4,9 +4,16 @@
     <div class="swiper-content" @mouseenter="swiperStop" @mouseleave="swiperStart">
       <div v-swiper:mySwiper="swiperOption" ref="mySwiper">
         <div class="swiper-wrapper">
-          <div class="swiper-slide" v-for="(item, index) in listData" :key="index" @click="goPage(item)">
-            <img :src="item.photo_uri" />
-            <div class="text">{{ item.title }}</div>
+          <div class="swiper-slide" v-for="(item, index) in listData" :key="index">
+            <app-link :item="{
+              news: {
+                data: item,
+                path: '/news/hot'
+              }
+            }">
+              <img :src="item.photo_uri" />
+              <div class="text">{{ item.title }}</div>
+            </app-link>
           </div>
         </div>
       </div>
@@ -14,11 +21,13 @@
   </div>
 </template>
 <script>
-import mTitle from '../../components/home/moduleTitle'
+import mTitle from '@/components/home/moduleTitle'
+import AppLink from '@/components/Link'
 export default {
   name: 'openClass',
   components: {
-    mTitle
+    mTitle,
+    AppLink
   },
   data() {
     const _this = this

components/home/presence.vue

@@ -6,7 +6,14 @@
         <div v-swiper:mySwiper="swiperOption" ref="mySwiper">
           <div class="swiper-wrapper">
             <div class="swiper-slide" v-for="(item, index) in listData" :key="index" @click="goPage(item)">
-              <img :src="item.photo_uri" />
+              <app-link :item="{
+                news: {
+                  data: item,
+                  path: '/news/hot'
+                }
+              }">
+                <img :src="item.photo_uri" />
+              </app-link>
             </div>
           </div>
           <div class="swiper-pagination swiper-pagination-bullets"></div>
@@ -44,12 +51,14 @@
 </template>
 
 <script>
-import mTitle from '../../components/home/moduleTitle'
+import mTitle from '@/components/home/moduleTitle'
+import AppLink from '@/components/Link'
 import { postNes } from '@/api'
 export default {
   name: 'presence',
   components: {
-    mTitle
+    mTitle,
+    AppLink
   },
   data() {
     return {

components/home/projectFeatures.vue

@@ -11,11 +11,13 @@
   </div>
 </template>
 <script>
-import mTitle from '../../components/home/moduleTitle'
+import mTitle from '@/components/home/moduleTitle'
+import AppLink from '@/components/Link'
 export default {
   name: 'projectFeatures',
   components: {
-    mTitle
+    mTitle,
+    AppLink
   },
   data() {
     return {