nuxtProject/components/news/NewsList.vue

<template>
  <li v-if="newsData">
    <div class="newsInfor-img-box" :style="{backgroundImage: `url(${newsData.pic || newsInforImg})`}"></div>
    <div class="newsInfor-list-content">
      <h5>{{newsData.title}}</h5>
      <div><i></i><span>{{newsData.startTime}}</span><i type="visits"></i><span>{{newsData.visits}}</span>
      </div>
      <p>{{newsData.intro}}</p>
      <a :href="`${baseUrl}/news/${newsData.code}`" >
        <span @click.prevent="checkInfo(newsData)">
          了解更多
        </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/client/newsInfor/newsInfor-list-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.code,
        };
        this.$router.push({ name: 'news-id', params: opt });

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

<style scoped>

</style>