vue项目实现 导航栏 的方式

已于 2023-05-06 18:38:48 修改
阅读量9.7k 收藏 25
点赞数 4
分类专栏： 开发小技巧总结 文章标签： vue.js javascript elementui
于 2022-05-11 14:32:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44603011/article/details/124708927
版权

实现效果：

方式一：利用router-link实现

首先：新建一个组件，将头部导航栏提取出来，使多个组件可以公用一个头部。

代码如下： 

<template>
  <div>
    <div class="xl-flex" style="margin-left: 560px">
      <router-link class="title_change" to="/">
        <div class="titleIcon1" style="width: 24px; height: 24px"></div>
        <span class="titleSpan">首页</span>
      </router-link>
      <router-link class="title_change" to="/project-detail-all">
        <div class="titleIcon6" style="width: 24px; height: 24px"></div>
        <span class="titleSpan">项目</span>
      </router-link>
      <router-link class="title_change" to="/evaluate">
        <div class="titleIcon6" style="width: 24px; height: 24px"></div>
        <span class="titleSpan">后评价模块</span>
      </router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
    name: "title-index",
    data() {
        return {
        };
    }
};
</script>

<style scoped lang="less">
.title_change {
  display: flex;
  align-items: center;
  padding: 4px 16px;
  box-sizing: border-box;
  cursor: pointer;
  margin-right: 76px;
  text-decoration: none;
  .titleSpan {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 0px;
    color: #00d8ff;
  }
  .titleIcon1 {
    background: url("@/assets/images/icon/title-home-icon.png") center no-repeat;
    background-size: 100%;
  }
  .titleIcon2 {
    background: url("@/assets/images/icon/title-comprehensiveReview-icon.png")
      center no-repeat;
    background-size: 100%;
  }
  .titleIcon3 {
    background: url("@/assets/images/icon/title-powerAccess-icon.png") center
      no-repeat;
    background-size: 100%;
  }
  .titleIcon4 {
    background: url("@/assets/images/icon/title-plan-icon.png") center no-repeat;
    background-size: 100%;
  }
  .titleIcon5 {
    background: url("@/assets/images/icon/title-investManege-icon.png") center
      no-repeat;
    background-size: 100%;
  }
  .titleIcon6 {
    background: url("@/assets/images/icon/title-allPlan-icon.png") center
      no-repeat;
    background-size: 100%;
  }
}
.router-link-active { // 控制点击router-link之后的样式
  
  background: url("../../assets/images/icon/fiveWord-chosed-background.png")
    center no-repeat;
  background-size: 100% 100%;
  .titleSpan {
    color: #ff942c;
  }
  .titleIcon1 {
    background: url("@/assets/images/icon/title-home-chosed-icon.png") center
      no-repeat;
    background-size: 100%;
  }
  .titleIcon2 {
    background: url("@/assets/images/icon/title-comprehensiveReview-chosed-icon.png")
      center no-repeat;
    background-size: 100%;
  }
  .titleIcon3 {
    background: url("@/assets/images/icon/title-powerAccess-chosed-icon.png")
      center no-repeat;
    background-size: 100%;
  }
  .titleIcon4 {
    background: url("../../assets/images/icon/title-plan-chosed-icon.png")
      center no-repeat;
    background-size: 100%;
  }
  .titleIcon5 {
    background: url("@/assets/images/icon/title-investManege-chosed-icon.png") center
      no-repeat;
    background-size: 100%;
  }
  .titleIcon6 {
    background: url("@/assets/images/icon/title-allPlan-chosed-icon.png") center
      no-repeat;
    background-size: 100%;
  }
}
</style>

注意事项：

 使用的方法：

方式二：通过点击事件控制index,从而实现点击效果

代码如下：

<template>
  <div>
    <div>
      <div
        style="
          margin-left: 560px;
          display: flex;
          align-items: center;
          height: 87px;
          padding: 17px 0;
          box-sizing: border-box;
          cursor: pointer;
        "
      >
        <div
          @click="chosedTitle(item.num)"
          v-for="(item, index) in titleData"
          :key="index"
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 76px;
          "
          :class="{
            twoWordChosedBackground:
              item.num == chosedIndex && item.title.length == 2,
            fourWordChosedBackground:
              item.num == chosedIndex && item.title.length == 4,
            fiveWordChosedBackground:
              item.num == chosedIndex && item.title.length == 5,
          }"
        >
          <img
            :src="item.num == chosedIndex ? item.chosedIcon : item.icon"
            style="width: 24px; height: 24px"
            alt=""
          />
          <span
            style="
              font-size: 18px;
              font-family: PingFang SC;
              font-weight: 500;
              line-height: 0px;
            "
            :style="{ color: item.num == chosedIndex ? '#FF942C' : '#00d8ff' }"
            >{{ item.title }}</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name:"title-index",
    data() {
        return {
            chosedIndex: 0,
            titleData: [
                {
                    title: "首页",
                    icon: require("@/assets/images/icon/title-home-icon.png"),
                    chosedIcon: require("@/assets/images/icon/title-home-chosed-icon.png"),
                    num: 0,
                },
                {
                    title: "综合评审",
                    icon: require("@/assets/images/icon/title-comprehensiveReview-icon.png"),
                    chosedIcon: require("@/assets/images/icon/title-comprehensiveReview-chosed-icon.png"),
                    num: 1,
                },
                {
                    title: "电源接入",
                    icon: require("@/assets/images/icon/title-powerAccess-icon.png"),
                    chosedIcon: require("@/assets/images/icon/title-powerAccess-chosed-icon.png"),
                    num: 2,
                },
                {
                    title: "月度计划",
                    icon: require("@/assets/images/icon/title-plan-icon.png"),
                    chosedIcon: require("@/assets/images/icon/title-plan-chosed-icon.png"),
                    num: 3,
                },
                {
                    title: "投资管理",
                    icon: require("@/assets/images/icon/title-investManege-icon.png"),
                    chosedIcon: require("@/assets/images/icon/title-investManege-chosed-icon.png"),
                    num: 4,
                },
                {
                    title: "项目全流程",
                    icon: require("@/assets/images/icon/title-allPlan-icon.png"),
                    chosedIcon: require("@/assets/images/icon/title-allPlan-chosed-icon.png"),
                    num: 5,
                },
            ],
        };
    },
    methods: {
        chosedTitle(val){ // 点击选中的值
            this.chosedIndex = val;
        },
    }
};
</script>

<style scoped>
.fiveWordChosedBackground{
     width: 146px;
    height: 32px;
    background: url('../../assets/images/icon/fiveWord-chosed-background.png') center no-repeat;
    background-size: 100%
}
.twoWordChosedBackground{
    width: 92px;
    height: 32px;
    background: url('../../assets/images/icon/twoWord-chosed-background.png') center center no-repeat;
    background-size: 100%
}
.fourWordChosedBackground{
    width: 128px;
    height: 32px;
    background: url('../../assets/images/icon/fourWord-chosed-background.png') center center no-repeat;
    background-size: 100%
}
</style>

此方法过于笨拙，不建议使用此方法。

逆风优雅
关注
  • 4
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue实现中部导航栏布局功能
10-16
主要介绍了vue实现中部导航栏布局功能，本文图文并茂，代码实例相结合介绍的非常详细，需要的朋友参考下吧
vue实现nav导航栏的方法
08-28
主要为大家详细介绍了vue项目nav导航栏的实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue3项目实战(四)---左侧导航菜单栏
最新发布
qq_39253096的博客
03-04 706
静态导航菜单
vue实现导航栏功能的方法
花生日记
06-04 5538
为此，我们使用如下代码来实现。在该代码中，我们需要先将 button.dialog-position属性设置为 true，然后在后面加上一个 flag. position属性，其作用为使 button.dialog-position属性的值在 DOM中可见，这样可以使用户通过 button.dialog-position属性看到 button.dialog-position属性的值。因此，我们先在初始页面添加一个子组件，如下： 接下来，我们需要给导航栏添加一些内容，以便方便我们查看。
【Vue项目搭建】修改【若依框架】的侧边栏、导航栏、面包屑样式、修改全局页面样式
热门推荐
Sabrina_cc的博客
07-20 6万+
【Vue项目搭建】修改【若依框架】的侧边栏、导航栏、面包屑样式、修改全局页面样式
Vue实现导航栏菜单
10-14
主要为大家详细介绍了Vue实现导航栏菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue实战第3章：主页设计之顶部导航栏
孙君的空间站
02-01 8660
Vue实战第3章：主页设计之顶部导航栏
vue导航栏组件
qq_45179361的博客
02-09 2527
使用html+css搭建网页导航栏。
前端热门框架Vue3.x自定义组件实现头部导航栏教程
02-05
Vue 3 更新了许多组件中的语法，包括生命周期、filter、setup、teleport 等，为了学习这些特性，需要先了解一下 Vue 组件的基本玩法。 目前关于Vue3.x的资料较少，为了帮助大家掌握Vue3.x技术，老师通过小案例的方式带领大家熟悉Vue.3x实现头部导航栏应用。
Vue实现顶部标签以及左侧层级导航栏
weixin_48907405的博客
06-15 4394
场景：因为从数据需要分类，所以在主数据详情页要加一个顶部的标签来实现分类，再根据左侧的从数据id来实现浏览从数据，但是其中有一个分类下面又分了层类，所以要用到左侧导航栏，样式如下：第一种：左侧没有层级导航直接是从数据模块第二种：左侧从数据包含层级导航栏。
Vue --- 菜单导航栏
zxsy19966的博客
06-29 7881
【vue】菜单导航栏
vue实现二级导航栏效果
10-16
主要为大家详细介绍了vue实现二级导航栏效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue导航栏部分的动态渲染实例
12-13
根据公司项目的需求，使用的是element-ui的nav-menu组件实现动态渲染左侧导航条的功能，这里我只写到了四级菜单。 代码部分： <el-submenu v-if='item.childs' :index='item.name' :route = 'item.value' class='edit_wrapper' @mouseover.native="overShow" @mous
uni-app 打包为 H5 并上传服务器
01-08
前言 我主要是用 uni-app 来写安卓端，近日需要将程序打包为 H5 放到 web服务器 上，经过一番折腾。 配置 在开始之前，推荐你先【拷贝】一份代码，防止打包出现问题导致代码受损。 在你的项目文件中找到 manifest.json ，打开并作如图配置： 运行的基础路径 如果你写的是 “ /H5/ “ ，那么你的服务器中要建立一个 H5 文件夹。 发行时启动摇树优化 功能是去掉无用代码与僵尸代码，但勾选时要慎重。 发行(打包) 依次点击菜单 → 发行 → 网站-h5手机版，然后弹出对话框，请做如下配置： 最后点击 发行 ，控制台会显示打包日志。 查看包 打包成功后，控制台会给出如下类
label标签的使用
逆风优雅的博客
04-26 3万+
定义和用法 <label> 标签为 input 元素定义标签（label）。 label 元素不会向用户呈现任何特殊的样式。不过，它为鼠标用户改善了可用性，因为如果用户点击 label 元素内的文本，则会切换到控件本身。 <label> 标签的 for 属性应该等于相关元素的 id 元素，以便将它们捆绑起来。 1. 在html中，<label>标签通常和<input>标签一起使用，<label>标签为input元素定义标注（标记） 2..
vue img使用动态src（ :src ）
逆风优雅的博客
04-24 1万+
在vue项目中使用，动态的src，需要注意的是： 在引用的文件目录的前面加上require 否则引入的图片是不生效的 如： <img :src="require('../../../assets/images/company_indicator/company-tab-three0' + (index + 1) + '.png')" /> 三元表达式的用法： <img :src="100 >=0? require('../../ass...
给 el-input 设置内容长度的方法
逆风优雅的博客
07-21 1万+
首先，我们都知道，限制input文本框的输入长度的，可以通过给这个元素加上maxlength的属性来实现 <input type="text" value="我是一个输入框" maxlength="5" /> <!-- 此时在文本框中输入的内容只能限制在5个字符 --> 但是，在饿了么框架中，我们想要设置el-input 输入框的长度，使用maxlength,就是无效的，解决的方法是，给这个输入框加上一个oninput属性 <el-input type="te..
获取数组中的每个对象中的某个属性的值
逆风优雅的博客
10-21 1万+
<script> // 假设初始数据 let arr = [ { id: 1, name: '李磊', }, { id: 2, name: '韩梅梅', }, { id: 3, name: '丽丽', }, { id: 4, name: '刘子', } ] 方法一： // 肯定要先遍历数组 , 用map 方法，把你想要的属性...
vue项目左侧导航栏
08-03
在Vue项目中，左侧导航栏通常是通过使用组件来实现的。根据引用[1]中的代码，可以看到在页面中使用了`<template>`标签来定义导航栏的结构。其中，`<el-aside>`标签用于显示一级菜单下的二级菜单，而`<el-main>`标签用于显示二级菜单对应的页面。在`<script>`标签中，通过引入`SideMenu`组件，并在`components`属性中注册该组件，可以实现导航栏的功能。同时，在`data`属性中定义了一个`lists`数组，用于存储菜单的数据。每个菜单项都包含一个`title`属性和一个`children`属性，`children`属性存储了二级菜单的数据。通过在模板中使用`SideMenu`组件，并将`lists`数组作为参数传递给该组件，可以动态生成导航菜单。[1] 如果需要使用动态数据构建导航菜单，可以参考引用[2]中的代码。在`action.js`文件中，通过配置获取动态树数据的请求路径，可以从后端获取动态数据。然后，在`LeftAside.vue`组件中，可以通过接口获取数据，并将数据传递给导航菜单组件，以构建动态导航菜单。[2] 另外，如果需要实现分页功能，可以参考引用[3]中的代码。在模板中使用`<el-pagination>`标签，通过设置相应的属性和事件来实现分页功能。可以设置`current-page`属性来指定当前页，`page-size`属性来设置每页显示的记录数，`total`属性来设置总记录数。通过监听`size-change`事件和`current-change`事件，可以在每页显示的记录数变化和当前页码变化时进行相应的处理。[3] 综上所述，通过使用组件和相应的属性、事件来实现左侧导航栏、动态导航菜单和分页功能，可以满足Vue项目中左侧导航栏的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值