vue移动端底部导航栏

最新推荐文章于 2024-09-16 07:50:50 发布

small面包

最新推荐文章于 2024-09-16 07:50:50 发布

阅读量3.1k

点赞数

分类专栏：前端 ElementUI 文章标签：移动端底部导航栏 vue 高亮

本文链接：https://blog.csdn.net/weixin_44986077/article/details/103503326

版权

本文介绍了如何在Vue移动端项目中创建底部导航栏，并展示了实现的效果图。通过点击导航栏，可以跳转到对应的页面。代码实现简洁，可将底部导航栏作为组件复用，例如在index组件中引入common.vue，根据需要在多个组件中引入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近写个小demo书写移动端的小demo，（别忘了移动端的适配问题）
效果图如下
在这里插入图片描述

点击底下的导航对应相应的页面
代码如下

<template>
  <div class="footer">
    <el-row>
      <el-menu
        :default-active="this.$route.path"
        class="el-menu-vertical-demo"
        router
      >

        <el-col :span="6">
          <el-menu-item index="/index">
            <i class="iconfont icon-icon-test1"></i>
            <div slot="title">一</div>
          </el-menu-item>
        </el-