我正在开发 Vuejs 中的单页应用程序，我想知道如何创建一个导航栏，根据我单击的内容显示/隐藏应用程序的不同部分。我已经布置好了导航栏，我只需要弄清楚如何让它显示/隐藏组件。我试图让导航栏组件修改一个数组，告诉我的应用程序要显示哪些组件，但它无法访问该数组。我应该怎么做？
【问题讨论】：
标签： javascript vue.js vue-component vuetify.js single-page-application
如果您没有使用 Vue-Router，这可能就是您要查找的内容。
不过，在大多数 Vue SPA 中，Vue-Router 会更受欢迎。
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-main>
<template>
<div>
<v-tabs
v-model="tab"
background-color="blue accent-4"
class="elevation-2"
dark
:centered="centered"
:grow="grow"
:vertical="vertical"
:right="right"
:prev-icon="prevIcon ? 'mdi-arrow-left-bold-box-outline' : undefined"
:next-icon="nextIcon ? 'mdi-arrow-right-bold-box-outline' : undefined"
:icons-and-text="icons"
>
<v-tabs-slider></v-tabs-slider>
<v-tab
v-for="i in tabs"
:key="i"
:href="`#tab-${i}`"
>
Tab {{ i }}
</v-tab>
<v-tab-item
v-for="i in tabs"
:key="i"
:value="'tab-' + i"
>
<v-card
flat
tile
>
<v-card-text>{{ text }}</v-card-text>
</v-card>
</v-tab-item>
</v-tabs>
</div>
</template>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
tab: null,
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
icons: false,
centered: false,
grow: false,
vertical: false,
prevIcon: false,
nextIcon: false,
right: false,
tabs: 3,
}),
})
</script>
</body>
</html>【讨论】：
这是我最近用 vue-router 做的一个项目的例子。第一个 sn-p 中的语法可能有点偏离，因为我习惯于在 vue CLI 中创建和编写，但是您在主标签中的 App.vue 中插入标签，设置您的路由器页面和您的路由器配置组件。
我建议设置一个 vue cli 创建应用程序。
在终端-vue create hello-world（在创建步骤提示中添加vue-router），如果你喜欢的话，在vue之后添加vuetify！
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-main>
<TopToolbar class="topTool"></TopToolbar>
<v-main>
<router-view></router-view>
</v-main>
<BottomNav class="bottomN"></BottomNav>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
import BottomNav from 'path';
new Vue({
el: '#app',
vuetify: new Vuetify(),
components: {TopToolbar, BottomNav},
data: () => ({
}),
})
</script>
</body>
</html><template>
<v-bottom-navigation
scroll-threshold="800"
absolute
color="primary"
light
grow
background-color="primary"
height="56"
>
<v-btn value="scan" :to="{ name: 'Scan'}">
<span v-if="this.$route.name != 'Scan'" style="color: #fff">Scan</span>
<v-icon v-if="this.$route.name != 'Scan'" size="24" color="#fff">mdi-barcode-scan</v-icon>
<v-icon v-else size="24" color="primary">mdi-barcode-scan</v-icon>
</v-btn>
<v-btn value="create" :to="{ path: '/'}">
<span v-if="this.$route.name != 'Create'" style="color: #fff">Create</span>
<v-icon v-if="this.$route.name != 'Create'" size="24" color="#fff">mdi-barcode</v-icon>
<v-icon v-else size="24" color="primary">mdi-barcode</v-icon>
</v-btn>
<v-btn value="print" :to="{ name: 'Print'}">
<span v-if="this.$route.name != 'Print'" style="color: #fff">Print</span>
<v-icon v-if="this.$route.name != 'Print'" size="24" color="#fff">mdi-printer</v-icon>
<v-icon v-else size="24" color="primary">mdi-printer</v-icon>
</v-btn>
</v-bottom-navigation>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component({})
export default class BottomNav extends Vue {}
</script>
<style scoped>
</style>import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
{
path: '/scan',
name: 'Scan',
component: () => import('../views/Scan.vue'),
},
{
path: '/',
name: 'Create',
component: () => import('../views/Create.vue'),
},
{
path: '/print',
name: 'Print',
component: () => import('../views/Print.vue'),
}
];
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
});
export default router;【讨论】：