nuxtProject/components/news/NewsList.vue

<template>
  <li v-if="newsData" @click.prevent="checkInfo(newsData)">
    <div class="newsInfor-img-box" :style="{backgroundImage: `url(${newsData.cover || newsInforImg})`}"></div>
    <div class="newsInfor-list-content">
      <h5>{{newsData.title}}</h5>
      <div><i></i><span>{{newsData.createDate}}</span></div>
      <p v-html="newsData.content"></p>
      <a :href="`${baseUrl}/news/${newsData.id}`" >
        <span>查看详情</span>
      </a>

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

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

  export default {
    name:     'NewList',
    props:    {
      newsData: {
        type:    Object,
        default: () => {
        },
      },
    },
    data() {
      return {
        newsInforImg: require(`~/static/images/website/new/new-img.png`),
      };
    },
    computed: {
      baseUrl() {
        return this.getBaseUrl;
      },
      ...mapGetters(['getBaseUrl']),
    },
    methods:  {
      checkInfo(data) {
        // console.log(window.localtion.href);
        // console.log(self.localtion.href);
        // console.log(document.URL);
        const opt = {
          id: data.id,
        };
        this.$router.push({ name: 'news-id', params: opt });

        this.$emit('know-more', data);
      },
    },
  };
</script>

<style scoped>

</style>