当前位置：首页 > VUE

vue实现新闻

2026-02-10 00:59:06VUE

Vue实现新闻功能

使用Vue框架实现新闻功能通常涉及新闻列表展示、新闻详情页、分类筛选等核心模块。以下是具体实现方案：

新闻列表组件

创建NewsList.vue组件展示新闻列表：

<template>
  <div class="news-list">
    <div v-for="item in newsList" :key="item.id" class="news-item">
      <h3 @click="goDetail(item.id)">{{ item.title }}</h3>
      <p>{{ item.summary }}</p>
      <span>{{ item.createTime }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newsList: []
    }
  },
  mounted() {
    this.fetchNews()
  },
  methods: {
    fetchNews() {
      axios.get('/api/news').then(res => {
        this.newsList = res.data
      })
    },
    goDetail(id) {
      this.$router.push(`/news/${id}`)
    }
  }
}
</script>

新闻详情组件

创建NewsDetail.vue组件展示具体内容：

<template>
  <div v-if="news" class="news-detail">
    <h1>{{ news.title }}</h1>
    <div v-html="news.content"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      news: null
    }
  },
  created() {
    this.fetchNews(this.$route.params.id)
  },
  methods: {
    fetchNews(id) {
      axios.get(`/api/news/${id}`).then(res => {
        this.news = res.data
      })
    }
  }
}
</script>

路由配置

在router/index.js中配置新闻相关路由：

{
  path: '/news',
  component: NewsList
},
{
  path: '/news/:id',
  component: NewsDetail
}

新闻分类筛选

添加分类筛选功能：

<template>
  <div>
    <select v-model="selectedCategory" @change="filterNews">
      <option value="">全部</option>
      <option v-for="cat in categories" :value="cat.id">{{ cat.name }}</option>
    </select>
    <NewsList :newsList="filteredNews" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedCategory: '',
      categories: [],
      allNews: []
    }
  },
  computed: {
    filteredNews() {
      return this.selectedCategory 
        ? this.allNews.filter(n => n.category === this.selectedCategory)
        : this.allNews
    }
  }
}
</script>

数据管理方案

对于复杂新闻系统，建议使用Vuex进行状态管理：

// store/modules/news.js
export default {
  state: {
    news: [],
    currentNews: null
  },
  mutations: {
    SET_NEWS(state, payload) {
      state.news = payload
    },
    SET_CURRENT_NEWS(state, payload) {
      state.currentNews = payload
    }
  },
  actions: {
    async fetchNews({ commit }) {
      const res = await axios.get('/api/news')
      commit('SET_NEWS', res.data)
    }
  }
}

无限滚动加载

实现新闻列表无限滚动：

<template>
  <div @scroll="handleScroll">
    <!-- 新闻列表内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      isLoading: false
    }
  },
  methods: {
    handleScroll() {
      if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 100) {
        this.loadMore()
      }
    },
    loadMore() {
      if (this.isLoading) return
      this.isLoading = true
      axios.get(`/api/news?page=${this.page}`).then(res => {
        this.newsList.push(...res.data)
        this.page++
      }).finally(() => {
        this.isLoading = false
      })
    }
  }
}
</script>