引入 vue-meta 解决单个 vue 页面请求不携带 referer

src/main.js

@@ -3,6 +3,9 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 
+import Meta from 'vue-meta'
+Vue.use(Meta)
+
 import VueCookies from 'vue-cookies'
 Vue.use(VueCookies)
 

src/views/home/Article.vue

@@ -11,7 +11,7 @@
             <div class="text item" v-for="(item, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
               <el-row>
                 <el-col :md="4">
-                  <router-link target="_blank" :to="`/article/${item.articleId}`">
+                  <router-link target="_blank" :to="`/article/${item.contentId}`">
                     <el-image
                       lazy
                       fit="cover"
@@ -21,7 +21,7 @@
                   </router-link>
                 </el-col>
                 <el-col :md="20">
-                  <router-link target="_blank" :to="`/article/${item.articleId}`">
+                  <router-link style="text-decoration-line: none" target="_blank" :to="`/article/${item.contentId}`">
                     <el-row>
                       <div style="padding: 14px">
                         <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.title | ellipsis }}</span>
@@ -81,10 +81,16 @@
 </template>
 
 <script>
-import {getArticles} from "@/api/article";
+// import {getArticles} from "@/api/article";
+import { getNewsList } from '@/api/news'
 
 export default {
   name: 'Article',
+  metaInfo: {
+    meta: [
+      { name: 'referrer', content: 'no-referrer' }
+    ]
+  },
   filters: {
     ellipsis(value) {
       if (!value) return ''
@@ -108,7 +114,6 @@ export default {
   },
   created() {
     document.title = '文章主页'
-
     this.getArticlesWrapper(this.currentPage)
   },
   mounted() {
@@ -128,7 +133,7 @@ export default {
       scrollTo(0, 0)
     },
     getArticlesWrapper(page) {
-      getArticles(page).then(resp => {
+      getNewsList(page).then(resp => {
         if (resp.code === 0) {
           const respData = resp.data
           this.dataList = respData.list

src/views/home/ArticlePage.vue

@@ -2,13 +2,22 @@
   <el-row class="movie-list">
     <el-col :md="18">
       <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-        <el-card class="box-card">
+        <el-card class="box-card" v-if="article !== null">
           <div slot="header" class="clearfix">
             <el-row>
               <span v-html="article.title" />
+              <span v-if="article.originalUrl !== null">
+                <a style="text-decoration-line: none" target="_blank" :href="`${article.originalUrl}`">
+                  原始链接
+                </a>
+              </span>
             </el-row>
-            <el-divider/>
+            <el-divider />
             <el-row>
+              发布于 <span v-html="article.publishAt" />
+            </el-row>
+            <el-divider />
+            <el-row v-if="userAvatar !== null">
               <el-col :md="2">
                 <router-link target="_blank" :to="`/user/` + userAvatar.userId">
                   <el-avatar>
@@ -18,7 +27,7 @@
               </el-col>
               <el-col :md="10">
                 <el-row>
-                  <span v-html="userAvatar.screenName"></span>
+                  <span v-html="userAvatar.screenName" />
                 </el-row>
                 <el-row>
                   <span>-</span>
@@ -30,16 +39,10 @@
             <el-row>
               <span v-html="article.content" />
             </el-row>
-            <el-divider/>
-            <el-row>
-              发布于 <span v-html="article.createAt" />
-            </el-row>
-            <el-divider/>
+            <el-divider />
             <el-row>
               <span>
-                <span>
-                  <i :class=collectedIcon @click="collectItem"/>
-                </span>
+                <i :class="collectedIcon" @click="collectItem" />
               </span>
             </el-row>
           </div>
@@ -55,8 +58,7 @@
             </el-row>
           </div>
           <div class="text item">
-            <el-row>
-            </el-row>
+            <el-row />
           </div>
         </el-card>
       </el-row>
@@ -65,11 +67,17 @@
 </template>
 
 <script>
-import { getArticle } from "@/api/article";
-import {getUserInfo} from "@/api/user";
+// import { getArticle } from '@/api/article'
+// import { getUserInfo } from '@/api/user'
+import { getNewsDetail } from '@/api/news'
 
 export default {
   name: 'ArticlePage',
+  metaInfo: {
+    meta: [
+      { name: 'referrer', content: 'no-referrer' }
+    ]
+  },
   components: {},
   filters: {
     ellipsis(value) {
@@ -91,17 +99,15 @@ export default {
   },
   created() {
     const articleId = this.$route.params.articleId
-    getArticle(articleId).then(resp => {
+    getNewsDetail(articleId).then(resp => {
       if (resp.code === 0) {
         this.article = resp.data
         document.title = '文章 - ' + this.article.title
-
-        getUserInfo(this.article.userId).then(resp => {
+        /* getUserInfo(this.article.userId).then(resp => {
           if (resp.code === 0) {
             this.userAvatar = resp.data
           }
-        })
-      } else {
+        })*/
       }
     })
   },