前言

在论坛搭建中需要根据话题板块进行标签页切换，实现效果如下：

页面实现

组件库方面使用的是vuetify组件库。

View.vue

<template>
  <v-col
    cols="12"
    md="8"
  >
    <v-tabs
      v-model="active"
      background-color="grey darken-4"
      dark
      style="border-radius: 5px"
    >
      <v-tab v-for="tab of tabs" :key="tab.id" :to="tab.to" ripple>
        {{tab.name}}
      </v-tab>
    </v-tabs>
    <router-view :key="key"/>
  </v-col>
</template>
<script>
  import axios from '~/plugins/axios';

  export default {
    name: 'CoreView',
    data() {
      return {
        active: null,
        tabs: []
      }
    },
    computed: {
      key() {
        return this.$route.path + Math.random();
      },
    },
    async mounted() {
      const topics = await axios({
        method: 'get',
        url: '/topics'
      });
      const tabs = [{
        id: 'all',
        name: '浏览',
        to: `/`
      }, {
        id: 'new',
        name: '最新',
        to: `/new`
      }
      ];//固定的两个标签页
      for (let t of topics["_embedded"].topics) {
        tabs.push({
          id: t.title,
          name: t.title,
          to: `/topic/${t.title}`
        })
      }//请求后端返回topics子路由名称
      this.tabs = tabs;
    },
  }
</script>
<style scoped>
  a {
    text-decoration: none;
    color: #F5F5F5;
  }
</style>

路由配置

在pages中创建topic的文件夹，根据nuxt动态路由配置方法，命名一个下划线为开头的文件，自动生成动态路由。 其在router.js文件中自动生成的子路由如下：

点击后即可进行路由跳转。