nebula/pages/topic/_topic_uri.vue

<template>
  <div class="topic-archive-page">
    <topic-nav :currentTopic="defaultParams.topic_uri"></topic-nav>
    <article-list :articles="articles" @currentChange="currentChangeArticle"></article-list>
  </div>
</template>

<script>
import ArticleList from '~/components/archive/list'
import {mapState} from 'vuex';

export default {
  name: "topicArticleList",
  components: {
    ArticleList
  },
  validate({params, store}) {
    if (params.topic_uri === 'news') {
      return true;
    }
    return params.topic_uri && store.state.topic.data.some(
      topic => topic.topicUri === params.topic_uri
    )
  },
  fetch() {
    let {store, params, query} = this.$nuxt.context
    params.page = query.page || 1
    return Promise.all([
      store.dispatch('article/fetchList', params)
    ])
  },
  watch: {
    '$route.query': function () {
      let _ts = this
      _ts.$store.dispatch('article/fetchList', {
        topic_uri: _ts.defaultParams.topic_uri,
        page: _ts.defaultParams.page || 1
      })
    }
  },
  computed: {
    ...mapState({
      articles: state => state.article.list.data
    }),
    currentTopic() {
      if (this.$route.params.topic_uri === 'news') {
        return true;
      }
      return this.$store.state.topic.data.find(
        topic => topic.topicUri === this.$route.params.topic_uri
      )
    },
    defaultParams() {
      return {
        topic_uri: this.$route.params.topic_uri,
        page: this.$route.query.page || 1
      }
    }
  },
  methods: {
    currentChangeArticle(page) {
      this.$router.push({
        path: `/topic/${this.defaultParams.topic_uri}?page=${page}`
      })
    }
  },
  mounted() {
    this.$store.commit('setActiveMenu', 'topic');
  },
  created() {
    if (!this.currentTopic) {
      this.$router.back()
    }
  }
}
</script>

<style scoped>

</style>