初识vue（10）—— vue-router 实现底部导航栏固定，组件切换

太过爱你忘了你带给我的痛 2022-10-30 06:30 206阅读 0赞

**  在实际项目中，我们常会需要设置导航，特别是在移动端，基本都需要设置个固定的底部导航。比如下图所示这种，这时我们就可以通过 vue-router 实现底部导航栏固定，组件切换。**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]

具体操作如下：

#### 1. 配置路由 ####

![在这里插入图片描述][2021021810592754.png]

代码：

/* 路由器对象模块 */
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import MSite from '../pages/MSite/MSite.vue'
    import Search from '../pages/Search/Search.vue'
    import Order from '../pages/Order/Order.vue'
    import Profile from '../pages/Profile/Profile.vue'
    import Login from '../pages/Login/Login.vue'
    
    //声明使用插件
    Vue.use(VueRouter)
    
    export default new VueRouter({ 
      //所有路由
      routes:[
        { 
          path:'/msite',
          component:MSite,
          meta:{ 
            showFooter:true
          }
        },
        { 
          path:'/search',
          component:Search,
          meta:{ 
            showFooter:true
          }
        },
        { 
          path:'/order',
          component:Order,
          meta:{ 
            showFooter:true
          }
        },
        { 
          path:'/profile',
          component:Profile,
          meta:{ 
            showFooter:true
          }
        },
        { 
          path:'/login',
          component:Login
        },
        { 
          path:'/',
          redirect:'/msite'
        }
      ]
    })

#### 2. 新建下述文件夹和文件，写入代码 ####

![在这里插入图片描述][20210218105734911.png]

代码（注意这里的css用的是 stylus 写的，具体根据自己的项目编写css）：

<template>
      <div class="footer_guide">
        <span class="guide_item" :class="{on: '/msite'===$route.path}" @click="goTo('/msite')">
          <span class="item_icon">
            <i class="iconfont icon-waimai"></i>
          </span>
          <span>外卖</span>
        </span>
        <span class="guide_item" :class="{on: '/search'===$route.path}" @click="goTo('/search')">
          <span class="item_icon">
            <i class="iconfont icon-search"></i>
          </span>
          <span>搜索</span>
        </span>
        <span class="guide_item" :class="{on: '/order'===$route.path}" @click="goTo('/order')">
          <span class="item_icon">
            <i class="iconfont icon-dingdan"></i>
          </span>
          <span>订单</span>
        </span>
        <span class="guide_item" :class="{on: '/profile'===$route.path}" @click="goTo('/profile')">
          <span class="item_icon">
            <i class="iconfont icon-geren"></i>
          </span>
          <span>我的</span>
        </span>
      </div>
    </template>
    
    <script>
      export default { 
        methods: { 
          goTo (path) { 
            this.$router.replace(path)
          }
        }
      }
    </script>
    
    <style lang="stylus" rel="stylesheet/stylus">
      @import "../../common/stylus/mixins.styl"
      .footer_guide  //footer
        top-border-1px(#e4e4e4)
        position fixed
        z-index 100
        left 0
        right 0
        bottom 0
        background-color #fff
        width 100%
        height 50px
        display flex
        .guide_item
          display flex
          flex 1
          text-align center
          flex-direction column
          align-items center
          margin 5px
          color #999999
          &.on
            color #02a774
          span
            font-size 12px
            margin-top 2px
            margin-bottom 2px
            .iconfont
              font-size 22px
    </style>

#### 3. App.vue 代码 ####

<template>
        <div id="app">
          <router-view></router-view>
          <FooterGuide v-show="$route.meta.showFooter"/>
        </div>
    </template>
    
    <script>
      import FooterGuide from './components/FooterGuide/FooterGuide'
        export default { 
          components:{ 
            FooterGuide
          }
        }
    </script>
    
    <style lang="stylus" rel="stylesheet/stylus">
      .app
        width 100%
        height 100%
        background #f5f5f5
    </style>

#### 4. main.js 代码 ####

import Vue from 'vue'
    import App from './App'
    import router from './router'//引入路由器
    
    new Vue({ 
      el: '#app',
      render:h => h(App),
      router //配置路由器
    });

这样便可以实现了。

#### 5. 重点代码位置 ####

**FooterGuide.vue文件中：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 2]

**App.vue 文件中：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 3]

**main.js文件中：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 4]  
当然路由配置那部分也很重要，看上面代码即可。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]: /images/20221024/d829e7256d8f44f9873c0af8870f9eee.png
[2021021810592754.png]: /images/20221024/3ba89ce7235b407a966d068b07400f54.png
[20210218105734911.png]: /images/20221024/928f86082b4040eeb4b41c0917514370.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]: /images/20221024/6c38b130579a44f095579f5d05d244bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 2]: /images/20221024/f84c370736ea410abd51e4249db10378.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 3]: /images/20221024/cb7c7d5bbdd24edbb03de1d6cf9a9715.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 4]: /images/20221024/da3b08e6e0e447769bf2441e9d72ba18.png