tabs - 如何在 Vue3 中使用 vue-router-tab?
问题描述
我安装了 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>
它在 vue2 中工作正常,但在 vue3 中,出现错误,提示未定义 tabs 属性。
如何在 Vue3 中使用 vue-router-tab?请帮帮我。
解决方案
推荐阅读
- go - 如何根据相同的值对数组进行分组
- php - woocommerce 为每个字段添加一个占位符
- python - 使用 Pandas 重采样功能的多个脚本的 OHLC
- javascript - 如何将纹理/形状投影到 Three.js 中网格的特定部分?
- c# - Powershell 到 C# 语法转换
- wordpress - 快速查看重定向到单个产品页面而不是快速查看弹出窗口
- laravel - 为什么 laravel 安装程序返回找不到命令?
- isapi - 海康威视码头ISAPI
- javascript - 创建动态 WebWorker(拒绝执行脚本,因为它的 MIME 类型('text/html'))
- linux - 带有cgo的golang抛出错误collect2:错误:ld返回1退出状态