我想让侧边栏出现在所有界面上

Question

我创建一个站点是为了监控员工，站点上有六个界面，第一个界面是Sine-Up，第二个界面是日志记录，第三个界面是创建一个project，第四个界面用于显示项目，第五个界面用于创建TASK，第六个界面用于查看任务。并且我在一个单独的界面中创建了一个侧边栏，就是屏幕上显示的图像，我现在的问题是我希望侧边栏出现在除了注册和日志之外的所有界面中。这是使用路由器视图的应用程序文件。 App.vue:

<template>
  <v-app>
        <router-view></router-view>
  </v-app>
</template>
<script>
export default {
  components:{

  }
}
</script>

并且在这个文件中，创建了侧边栏，我希望它出现在所有界面中。 navbar.vue:

<template>
  <v-app>
    <div class="main-sidebar-container">
      <div class="main-sidebar-container_content">
        <v-navigation-drawer class="deep-purple accent-4" dark permanent>
          <div class="main-sidebar-container_content_header">
            <img class="logo" src="../../../src/assets/logo_base.png" />
          </div>

          <v-divider></v-divider>

          <div class="sidebar-search">
            <div class="cu2-search_simple-layout cu2-search">
              <div class="cu2-search__inner ">
                <div class="cu2-search__icon icon">
                  <svg class="ng-star-inserted">
                    <use
                      xlink:href="https://app.clickup.com/map.e7a227c29e2316abeae1.svg#svg-sprite- 
                       cu3-search"
                    ></use>
                  </svg>
                </div>
              </div>
            </div>
          </div>

         <div class="cu2-search__text"> Search </div>

          <v-list>
            <v-list-item v-for="item in items" :key="item.title" class="twoSection" link>
              <v-list-item-icon>
                <v-icon>{{ item.icon }}</v-icon>
              </v-list-item-icon>

              <v-list-item-content>
                <v-list-item-title>{{ item.title }}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list>

          <template v-slot:append>
            <div class="pa-2">
              <v-btn block>
                Logout
              </v-btn>
            </div>
          </template>
        </v-navigation-drawer>
      </div>
    </div>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      drawer: true,
      items: [
        { title: "Home", icon: "mdi-home-city" },
        { title: "Notifications", icon: "mdi-account" },
        { title: "Pulse", icon: "mdi-account-group-outline" },
        { title: "Goals", icon: "mdi-account" },
        { title: "Show less", icon: "mdi-account-group-outline" }
      ],
      mini: true,
    };
  },
};
</script>

<style scoped>
.main-sidebar-container {
  left: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 60%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
}
.main-sidebar-container_content {
  width: 50%;
  height: 100%;
}

.main-sidebar-container_content_header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 10%;
  padding-left: 1rem;
}

.logo {
  display: flex;
  width: 50%;
  z-index: 1;
  position: fixed;
}

.sidebar-search {
  display: flex;
  align-items: center;
  height: 32px;
  flex-shrink: 0;
  margin: 0 8px 10px;
}
.cu2-search_simple-layout {
  width: auto;
  height: 100%;
  flex-grow: 1;
  border-radius: 4px;
  background: #f6f7f9;
}

.cu2-search {
  transition: background-color 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}

.cu2-search__inner {
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.cu2-search__icon {
  transition: fill 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
}

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 0;
  flex-shrink: 0;
}

.icon svg {
    display: block;
}

.cu2-search__text{
        display: block;
    font: 400 12px/1 Gotham Pro,Proxima Nova,arial,serif;
    color: rgba(124,130,141,.5);
      transition: color .2s cubic-bezier(.785,.135,.15,.86) 0s;
    cursor: pointer;
    display: none;
}

.twoSection{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10%;
}
</style>

main.js:

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import VueRouter from "vue-router";
import { routes } from "./router";
import axios from "axios";
import { store } from './store/index';
import Vuelidate from "vuelidate";
import 'material-design-icons-iconfont/dist/material-design-icons.css'

Vue.config.productionTip = false
Vue.use(VueRouter);
Vue.use(Vuelidate);

axios.defaults.baseURL = "localhost:4000/api/services";
axios.defaults.headers.common["Authorization"] =
  "Bearer " + localStorage.getItem("accessToken") || null;
axios.defaults.headers.get["Accepts"] = "application/json";


const router = new VueRouter({
  routes,
  mode: "history",
}); 

new Vue({
  vuetify,
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Answer 1

我在 React.js 中使用的方法是，我曾经制作一个菜单组件，然后将该组件与每个 MenuItem 组件一起使用。就像您的情况 Home MenuItem 或其他组件 一样，您可以在该 MenuItem 组件

中调用 Menu 组件

像这样

const Menu = () => {
    return <div>{...Menu}</div>
}

const HomeMenuItem  = () => {
    return (
        <div>
            <Menu />
            
            <div>
            {...this menu content in here!}
            </div>
        </div>
    )
}

其他所有菜单项也是如此，虽然有点乱，但确实有效。

Answer 2

您可以将导航栏组件添加到 App .vue

喜欢

<template>
  <v-app>
     <div>
        <div class="flex w-full overflow-auto h-screen bg-page">
            <navbar class="w-full flex-1 max-w-72"/>
            <div class="px-4 flex-1 max-h-screen overflow-auto">
                <div class="pb-16">
                    <router-view></router-view>
                </div>
            </div>
        </div>  
 </v-app>
</template>
<script>
    import navbar from './navbar'
    export default {
      components:{
       navbar
      }
    }

</script>

但是您应该处理登录和注册视图以使侧边栏消失。

为此，您有多种选择。

Answer 3

要让它出现在每个页面中，您需要在每个页面中导入导航组件。

因此，例如，假设您的导航文件名为 TheNavigation.vue，那么在每个界面上，您需要在您想要的模板中执行以下操作要出现的组件-->

 <div style="text-align: center;">
           <TheNavigation />
        <transition name="fade" mode="out-in">
          <router-view :key="$route.path" />
        </transition>
 </div>

然后，在脚本中，您需要像下面这样导入组件

<script>
import TheNavigation from '../components/TheNavigation.vue';
import axios from "axios";
export default {
     components: {
    TheNavigation
  },
    data() {
    }
  }
 </script>

让我知道这是否有效！或者如果你需要我更深入地了解这个！确保在脚本中导入导航组件时输入相对路径！

我想让侧边栏出现在所有界面上

I want the sidebar to appear on all interfaces

css

vue.js

vuetify.js