nuxtProject/pages/news/_id.vue

<template>
  <div class="client-details-page">

    <!-- 详情页 -->
    <div class="client-details-box">

      <!--行业资讯详情-->
      <div class="client-details-wrap">
        <h1>{{infoData.title}}</h1>
        <p class="details-visits-box"><i></i><span>{{infoData.startTime}}</span><i type="visits"></i><span>{{infoData.visits}}</span>
        </p>
        <div class="client-content-box" v-html="infoData.content"></div>
        <!--    关键字    -->
        <div class="client-link-json">
          <span>关键词：</span>
          <a :href="item.url" v-for="item in linkJson">{{item.text}}</a>
        </div>
        <div class="client-details-pagination">
          <a v-show="infoData.lastId" :href="`${baseUrl}/news/${infoData.lastId}`">
            <span class="mta-hidden-xs" @click.prevent="changeNews(infoData.lastId)" :title="'上一篇：'+infoData.lastName">上一篇：{{infoData.lastName}}</span>
            <span class="mta-hidden-sm details-phone-btn" @click.prevent="changeNews(infoData.lastId)">上一篇</span>
          </a>
          <a v-show="infoData.nextId" :href="`${baseUrl}/news/${infoData.nextId}`">
            <span class="mta-hidden-xs" @click.prevent="changeNews(infoData.nextId)" :title="'下一篇：'+infoData.nextName">下一篇：{{infoData.nextName}}</span>
            <span class="mta-hidden-sm details-phone-btn" @click.prevent="changeNews(infoData.lastId)">下一篇</span>
          </a>
        </div>
      </div>

      <!-- 最新新闻 -->
      <div class="latest-news-box mta-hidden-xs">
        <h4>最新新闻</h4>
        <ul class="latest-news-list">
          <li v-for="(item, index) in newestData" :key="index">
            <a :href="`${baseUrl}/news/${item.code}`">
              <span @click.prevent="changeNews(item.code)" :title="item.title">{{item.title}}</span>
            </a>
            <p class="details-visits-box"><i></i><span>{{item.startTime}}</span><i type="visits"></i><span style="margin-right: 0">{{item.visits}}</span>
            </p>
          </li>
        </ul>
      </div>

    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';

  export default {
    name:     'news_id',
    layout:   'templateB',

    async asyncData({ params, $axios, store }) {
      // 设置选中菜单
      store.commit('setActiveNav', '/news');
      try {
        const url = '/home/news/info';
        const opt = {
          code: params.id,
        };
        const res = await $axios.post(url, opt);
        const url2 = '/home/news/newest';
        const res2 = await $axios.post(url2);
        const linkJson = res.data.data['linkJson'] ? JSON.parse(res.data.data['linkJson']) : [];

        return {
          infoData:   res.data.data,
          newestData: res2.data.data.data,
          linkJson
        };
      } catch (e) {
        return {};
      }
    },
    head(){
      return {
        title: this.infoData.title,
        meta: [
          {
            hid: this.infoData.keyword,
            name: 'description',
            content: this.infoData.intro
          }
        ],
      }
    },
    computed: {
      baseUrl() {
        return this.getBaseUrl;
      },
      ...mapGetters(['getBaseUrl']),
    },
    methods:  {
      changeNews(id) {
        this.$router.push({ name: 'news-id', params: { id } });
      },
    },
  };
</script>
<style lang="scss" scoped>
.client-link-json {
  margin-bottom: 10px;

  span {
    color: #333;
    display: inline-block;
    margin-left: 10px;
    font-weight: 800;
    font-size: 14px;
  }

  a {
    color: #00b96b;
    display: inline-block;
    margin-right: 10px;
    font-weight: 400;
    font-size: 14px;
  }
}
</style>