如何在Vue3中使用vue-router-tab？

Question

我安装了 vue-router-tab。 (npm i vue-router-tab -S) 并配置。

main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import RouterTab from "vue-router-tab";
import "vue-router-tab/dist/lib/vue-router-tab.css";

const app = createApp(App);

app.use(RouterTab);
app.use(store);
app.use(router);
app.mount("#app");

路由器/index.js

import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";
import { RouterTabRoutes } from "vue-router-tab";
import Frame from "../components/layout/Frame.vue";

const routes = [
  {
    path: "/",
    component: Frame,
    children: [
      ...RouterTabRoutes,
      {
        path: "/",
        name: "Home",
        component: Home,
        meta: {
          title: "Home",
        },
      },
      {
        path: "/about",
        name: "About",
        component: () =>
          import(/* webpackChunkName: "about" */ "../views/About.vue"),
        meta: {
          title: "About",
        },
      },
    ],
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

组件/布局/Frame.vue

<template>
  <router-tab />
</template>

<script>
export default {
  name: "Frame",
  setup() {},
};
</script>

应用程序.vue

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view />
</template>

<script>
export default {};
</script>

npm runserve 抛出错误。

在vue2中工作正常，但在vue3中，出现错误，说tabs属性未定义。

如何在Vue3中使用vue-router-tab？请帮助我。

Answer 1

也许你可以试试这个。我用vue3更改它，只需更改一些名称即可，https://github.com/SelfDown/router-tab-vue3