如何使用Vue Router实现动态路由标签页？

npm install vue-router

yarn add vue-router

import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)const router = new Router({  routes: []})export default router

<template>  <div>    <router-link       v-for="tab in tabs"      :key="tab.name"      :to="tab.to"      active-class="active"      class="tab-item"    >      {{tab.title}}    </router-link>  </div></template><script>export default {  data() {    return {      tabs: [        { title: '首页', to: '/' },        { title: '新闻', to: '/news' },        { title: '关于', to: '/about' }      ]    }  }}</script><style scoped>.tab-item {  padding: 10px;  margin-right: 10px;  cursor: pointer;}.active {  background-color: #eee;}</style>

import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)const router = new Router({  routes: [    {      path: '/',      name: 'Home',      component: () => import('@/views/Home.vue')    },    {      path: '/news',      name: 'News',      component: () => import('@/views/News.vue')    },    {      path: '/about',      name: 'About',      component: () => import('@/views/About.vue')    }  ]})export default router

<template>  <div id="app">    <tab-bar></tab-bar>    <router-view></router-view>  </div></template><script>import TabBar from '@/components/TabBar.vue'export default {  components: {    TabBar  }}</script>