如何在 Vue 中为单页应用程序创建导航栏？
[英]How do I create a navbar for a single-page-app in Vue?
问题描述
I'm working on a single-page app in Vuejs and I'm wondering how I create a navbar that shows/hides different sections of the app based on what I click.
我正在使用 Vuejs 开发一个单页应用程序，我想知道如何创建一个导航栏，根据我单击的内容显示/隐藏应用程序的不同部分。 I have the navbar laid out, I just need to figure out how to make it show/hide components.我已经布置好了导航栏，我只需要弄清楚如何让它显示/隐藏组件。 I tried to make the navbar component modify an array that tells my app which components to display, but it can't access the array.我试图让导航栏组件修改一个数组，告诉我的应用程序要显示哪些组件，但它无法访问该数组。 What should I do instead?我应该怎么做？
2 个解决方案
解决方案1
3 已采纳 2021-02-16 01:31:20
If you're not using Vue-Router , this may be what you're looking for.如果您不使用Vue-Router ，这可能就是您正在寻找的。
Vue-Router would be preferable in most Vue SPAs though.不过，在大多数 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>
解决方案2
1 2021-02-16 13:27:14
Here is an example of a recent project I made with vue-router.这是我最近使用 vue-router 制作的一个项目的示例。 The syntax maybe a little off in the first snippet as I'm used to creating and writing in vue CLI, but you insert the tag in App.vue in the main tag, setup your router page and your router config component.第一个片段中的语法可能有点偏离，因为我习惯于在 vue CLI 中创建和编写，但是您将标签插入 App.vue 的主标签中，设置您的路由器页面和路由器配置组件。
I would recommend setting up a vue cli create app.我建议设置一个 vue cli 创建应用程序。
In terminal - vue create hello-world (add vue-router in create steps prompt), vue add vuetify after if you like!在终端 - 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;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.