nuxtProject/pages/news/_id.vue

<template>
  <div class="client-details-page">
    <div :style="{backgroundImage: 'url(' + bannerDefault + ')'}" class="client-banner-box"></div>
    <!-- 详情页 -->
    <div class="client-details-box">
      <div class="client-container">
      <!--行业资讯详情-->
        <h1>{{infoData.title}}</h1>
        <p class="details-visits-box"><i></i><span>{{infoData.createDate}}</span>
        </p>
        <div class="client-content-box" v-html="infoData.content"></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.lastTitle">上一篇：{{infoData.lastTitle}}</span>
          </a>
          <a v-show="infoData.nextId" :href="`${baseUrl}/news/${infoData.nextId}`">
            <span class="mta-hidden-xs" @click.prevent="changeNews(infoData.nextId)" :title="'下一篇：'+infoData.nextTitle">下一篇：{{infoData.nextTitle}}</span>
          </a>
        </div>
      </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 = '/common/client/web/news/info';
        const opt = {
          id: params.id,
        };
        const res = await $axios.post(url, opt);
          console.log(res);
        return {
          infoData:   res.data.data,
        };
      } catch (e) {
        return {};
      }
    },
    computed: {
      baseUrl() {
        return this.getBaseUrl;
      },
      ...mapGetters(['getBaseUrl']),
    },
    data() {
      return {
        // banner图
        bannerDefault:   require(`~/static/images/website/banner/cx-banner-xwzx.png`),
      }
    },
    head(){
      return {
        title: '家政学',
      }
    },
    methods:  {
      changeNews(id) {
        this.$router.push({ name: 'news-id', params: { id } });
      },
    },
  };
</script>
<style lang="scss">
.client-details-page .client-details-wrap.isRiZhi {
  width: 100% !important;
  border-right: none;

  h1 {
    text-align: center;
  }

  .details-visits-box {
    text-align: center;
  }
}
</style>