Fixed bottom navigation bar of millet Mall (I) of VUE

Soon after learning vue, I plan to do a project, record my difficulties while doing it.
The first problem I encountered was the first bottom navigation bar. I didn't want to use position:fixed; bottom: 0. So I made a preliminary contact with flex layout. To learn flex, I can go to see Ruan Yifeng. It's very good, Ruan Yifeng flex layout Stop gossiping and start with the renderings

App.vue: (here, the bottom navigation bar is encapsulated as a component, BottomNav. Router view is to route to the index.vue page.)

<template>
  <div style=" display: flex;flex-direction: column;min-height: 100vh;">
  <router-view></router-view>
  <BottomNav></BottomNav>
  </div>
</template>

<script>
import BottomNav from './components/BottomNav'

export default {
  components:{
    BottomNav
  }
}
</script>

<style>

</style>

index.vue (max height: 92vh; set the main content area to 92% and the bottom 8% of BottomNav to 100%. Then you can get the desired result overflow-y: scroll;) by setting the scroll bar later.)

<template>
<div style="max-height: 92vh;overflow-y: scroll;flex: 1;">
  index<br/>
  index<br/>
  index<br/>
  index<br/> index<br/>
  index<br/>
  index<br/>
  index<br/>
  index<br/>
  index<br/>
  index<br/> index<br/>
  index<br/>
  index<br/>
  index<br/>
  index<br/>
  index<br/>
  index<br/>
  index<br/>
  index<br/>
  index<br/>
  index<br/>
  index<br/> index<br/>
  index<br/>
  index<br/>
  index<br/>
  index<br/>
  index<br/>
  index<br/> index<br/>
  index<br/>
  index<br/>
  index<br/>
  index<br/>
  index<br/>
  index<br/>
  index<br/>
  index<br/>
  index<br/>
  index<br/>
  index<br/> index<br/>
  index<br/>
  index<br/>
  index<br/>
  index<br/>
  index<br/>
  index<br/> index<br/>
  index<br/>
  index<br/>
  index<br/>
  index<br/>
  index<br/>
  index<br/>
  index<br/>

</div>
</template>

<script>
export default {

}
</script>

<style>

</style>

BottomNav.vue

<template>
  <div class="navigation">
    <div class="nav"><img class="navIcon" src="../../static/image/homeOn.png"/>home page</div>
    <div class="nav"><img class="navIcon" src="../../static/image/categoryOff.png"/>classification</div>
    <div class="nav"><img class="navIcon" src="../../static/image/discoverOff.png"/>find</div>
    <div class="nav"><img class="navIcon" src="../../static/image/cartOff.png"/>Shopping Cart</div>
    <div class="nav"><img class="navIcon" src="../../static/image/meOff.png"/>My</div>
  </div>
</template>

<script>
  export default {}
</script>

<style>
  .navigation{
    display:flex;/*Set the contents of five navigation bars from column arrangement to row arrangement*/
    height: 8vh ;
    font-size: 0.7rem;
  }
  .nav{
    display: flex;/*This and the following flex direction property settings arrange the pictures parallel to the text*/
    flex-direction: column;
    flex: 1;/*Set the contents of five navigation bars to be divided equally*/
    margin: 0.5rem 0 0 1rem;
    line-height: 1.2rem;
  }
  .navIcon{
    width: 1.3rem;
    height: 1.3rem;
  }
</style>