javascript - 如何使用单独的 router.js 文件添加 Vuetify 选项卡?
问题描述
我想将选项卡路由到我已分配的某个组件但它不成功,因为当我单击选项卡时,该组件不会保留选项卡视图并直接查看另一个页面。
我一直在尝试提供一些示例的代码,但没有成功。
这里 myaccount.vue
<template>
<div>
<v-toolbar color="deep-purple darken-4" dark tabs>
<h3>My Account</h3>
<v-spacer></v-spacer>
<v-btn small color="error">PAYMENT RM 1120.00</v-btn>
<template v-slot:extension>
<v-tabs color="deep-purple darken-4" align-with-title>
<v-tabs-slider color="white"></v-tabs-slider>
<v-tab to="/foo">Profile</v-tab>
<v-tab to="/bill">Bill</v-tab>
</v-tabs>
</template>
</v-toolbar>
<v-tabs-items>
<v-tab-item>
<router-view></router-view>
</v-tab-item>
</v-tabs-items>
</div>
</template>
这里的 router.js 文件:
import Bill from './views/myccom/bill.vue'
Vue.use(Router)
routes: [
{
path: '/bill',
name: 'Bill',
component: Bill
},
],
如何使标签贴在顶部并且内容移动而不隐藏标签?
解决方案
不要用v-tab-item
,只要router-view
。
例子:
<template>
<v-container>
<v-tabs
v-model="activeTab"
slider-color="yellow">
<v-tab to="{ name: 'profile' }">
Profile
</v-tab>
<v-tab to="{ name: 'bill' }">
Bill
</v-tab>
</v-tabs>
<router-view/>
</v-container>
</template>
<script>
export default {
name: 'MyComponentName',
data: () => ({
activeTab: '0'
})
}
</script>
推荐阅读
- c++ - 在函数中将 ifstream 作为参数传递
- django - 从 html 按钮调用 django 函数
- node.js - Google 表格 POST 请求 - 有效负载过大错误
- android - 如何在 Kotlin 中设置使用 AsyncTask 运行我的代码
- java - Kotlin:可以在包外访问内部类
- javascript - 为什么我的 jQuery 在页面加载时不起作用?
- java - 在 Spring Boot 中禁止某些链接除了 GET 之外的任何内容
- apache-spark - 使用 Pyspark 进行交叉验证
- javascript - 处理一个空选择的最佳实践,其中 null 存储为 int 在 postgreSQL 中
- python - 使用 OSError 成功部署后 Azure 功能失败:[Errno 107]