preface

In the forum building, you need to switch the tabs according to the topic plate, and the results are as follows:

Page implementation

The component library aspect uses the Vuetify component library.

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: 'browse' to: ` / `}, {id: 'new' name: 'new', to: ` / new `}]. For (let t of topics["_embedded"].topics) {tabs. Push ({id: t.tab, name: t.tab, to: '/topic/${t.tip}'})}// Request backend return topics subroute name this.tabs = tabs; }, } </script> <style scoped> a { text-decoration: none; color: #F5F5F5; } </style>Copy the code

The routing configuration

Create topic folder in Pages, according to nuXT dynamic routing configuration method, name a file starting with an underscore, automatically generate dynamic routing.Its automatically generated child routes in router.js are as follows:

Click to redirect the route.