如何在 Vue 中为单页应用程序创建导航栏？

Question

我正在使用 Vuejs 开发一个单页应用程序，我想知道如何创建一个导航栏，根据我点击的内容 shows/hides 应用程序的不同部分。我已经布置好导航栏，我只需要弄清楚如何制作它 show/hide 组件。我试图让导航栏组件修改一个数组，告诉我的应用程序要显示哪些组件，但它无法访问该数组。我应该怎么做？

Answer 1

如果您没有使用 Vue-Router，这可能就是您要找的。

Vue-Router 在大多数 Vue SPA 中更受欢迎。

<!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>

Answer 2

这是我最近用vue-router做的一个项目的例子。第一个片段中的语法可能有点偏离，因为我习惯于在 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;

如何在 Vue 中为单页应用程序创建导航栏？

How do I create a navbar for a single-page-app in Vue?

javascript

single-page-application

vue.js

vue-component

vuetify.js