Vuejs - 如何将视图放在导航栏下

Question

我正在尝试组织我的视图（此处为 CopiView），以便它们显示在导航栏下方。

对于这个视图，我有一个名为“Copi!”的 h1。使用下面显示的代码，h1 位于导航栏上方。

这是我组织我的 router/index.js:

import {createRouter, createWebHistory} from "vue-router"
import MaisonView from "../views/MaisonView.vue"
import CopiView from "../views/CopiView.vue"

const router= createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
       {
        path: "/",
        name: "maison",
        component: MaisonView
       },
       {
        path: "/copi",
        name: "coléoptère pirouette",
        component: CopiView
       },
    ]
})  

export default router

我的App.vue：

<template>
  <div class="container">
        <Navigation></Navigation>
        <router-view/>
  </div>
</template>

<script>
  import {RouterView} from "vue-router"
  import Navigation from "./components/Navigation.vue" 
  
  export default{
    name: "App",
    components: {
      Navigation,
      RouterView,
    }
  }

</script>

我的 App.vue 的 css :

.container{
  display: flex;
  flex-direction: column;
}

导航组件：

<template>
    <link rel="stylesheet" href="/src/assets/navigation.css">
    <body>
      <div> 
        <ul class="navBar">
            <li class="menu-item" v-for="link in filteredLinks" :key="link.id" >
                <div @mouseover="onMouseOver(link)">
                    <RouterLink :to="link.path" class="menu-link">
                        <img class="menu-icon" :src="link.icon"  />
                        <div class="iconText">{{link.text}}</div>
                    </RouterLink>        
                </div>
            </li>
        </ul>
        <RouterLink active-class="active" class="xCentered" to="/"> 
          <img src="../ressources/images/accueil/animatedCordon.gif" alt="logo" class="menuTitle navBar ">
       </RouterLink>   
      </div>
    </body> 
  </template>
  
  <script>  
    import {RouterLink} from "vue-router"
 
  export default{
    data(){
        return{
            showActive: false,
            links: [{
                    id:1,
                    icon: "/src/ressources/images/accueil/erocystite icon.png",
                    text: "",
                    storageText: "Erocystite",
                    path: "/erocystite/projets",
                    active: false,
                    currentRoute : false,
                },
                {
                    id:2,
                    icon: "/src/ressources/images/accueil/copi icon.png",
                    text: "",
                    storageText: "Coleoptere pirouette",
                    path: "/copi",
                    active: false,
                    currentRoute : false,
                },
                {
                    id:3,
                    icon: "/src/ressources/images/accueil/rougeglotte icon.png",
                    text: "",
                    storageText: "Rouge glotte",
                    path: "/rougeglotte",
                    active: false,
                    currentRoute : false,
                },
                {
                    id:4,
                    icon: "/src/ressources/images/accueil/strate icon.png",
                    text: "",
                    storageText: "Strate, hydrate-moi",
                    path: "/strate",
                    active: false,
                    currentRoute : false,
                },
                {
                    id:5,
                    icon: "/src/ressources/images/accueil/puzzle pathogene icon.png",
                    text: "",
                    storageText:"Puzzle pathogene",
                    path: "/puzzlepathogène",
                    active: false,
                    currentRoute : false,
                }
            ],
        }
    },
    methods: {
        onMouseOver(el){
            el.text=el.storageText;
            console.log("over!"+el.text)
        },
    },
    computed:{
        filteredLinks(){
            var linksArray = JSON.parse(JSON.stringify(this.links));
            for (let i=0; i<5; i++){
                if (linksArray[i].path == this.$route.path){
                    console.log("they're equal")
                    linksArray[i].text = linksArray[i].storageText;
                }
            }
            return linksArray;
        }
    }}
</script>

以及 Navigation 组件的 css :

@import "./main.css";

.iconText{
   color: white;
   font-family: cutenotes;
   font-size: 30px;    
}

.navBar{
   padding: 0px;
   margin-top: 30px;
   position: fixed;
   top: 0;
   width:100%;
   display: inline-flex;
   justify-content: space-around;
   list-style-type: none;
}

.menu-title{
   width: auto;
   height: 1000px;
}

.menu-icon{
   width: auto;
   height: 150px;
}

.menu-link{
display: grid;
justify-content: center;
align-items: center;
}

.menu-link > *{
grid-column-start: 1;
grid-row-start: 1;   
}

.container{
   display: flex;
   flex-direction: column;
   justify-content: center;
}

非常感谢您的帮助！

Answer 1

为什么不将 z-index: 1 设置为样式中的 .navbar，甚至更高，100。

Vuejs - 如何将视图放在导航栏下

问题描述投票：0回答：1

1个回答

最新问题

Vuejs - 如何将视图放在导航栏下

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1