vue项目实现 导航栏 的方式

原创 已于 2023-05-06 18:38:48 修改 · 1w 阅读 · 38 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #elementui

于 2022-05-11 14:32:03 首次发布
本文介绍了两种在Vue中创建头部导航的方法：一是使用`router-link`实现页面间的跳转，并通过`router-link-active`控制选中状态；二是通过点击事件改变变量实现效果。第一种方法简洁高效，第二种则相对繁琐。建议使用`router-link`进行组件间导航。

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

实现效果：

方式一：利用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>

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

Vue3 H5、原生微信小程序与 UniApp 自定义 TabBar 实现详解
qq_53245353的博客
07-10 1033
确保你已经创建了一个 Vue3 项目（使用 Vite 或 Vue CLI），无需额外安装依赖。微信小程序默认提供了tabBar配置，但不支持动态修改或完全自定义样式。因此我们通常采用自定义 TabBar 方式。data: {tabs: [label: '首页',},label: '日志',},methods: {});});left: 0;right: 0;
Vue实现导航栏菜单
10-14
主要为大家详细介绍了Vue实现导航栏菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue实现导航栏功能的方法
花生日记
06-04 6943
为此，我们使用如下代码来实现。在该代码中，我们需要先将 button.dialog-position属性设置为 true，然后在后面加上一个 flag. position属性，其作用为使 button.dialog-position属性的值在 DOM中可见，这样可以使用户通过 button.dialog-position属性看到 button.dialog-position属性的值。因此，我们先在初始页面添加一个子组件，如下： 接下来，我们需要给导航栏添加一些内容，以便方便我们查看。
Vue导航栏
sbxjhvdddjdjd的博客
09-04 1968
首先我们需要一个公共的导航栏，里面的div内容就不展示了，主要展示的是引用的步骤，具体的div样式，在elementUI的官网有。Vue的项目中，导航栏是经常需要使用到的，主要的是如何将公共的导航栏引用到页面上，这里主要讲解常用的两种方式。在我们需要显示的页面，将meta下的属性值设置为ture，不需要的设置为false，默认不进行配置就是不显示。前面说了，meta下的属性是自定义的，并不是网上说的是keepAlive进行绑定的。在vue给的官方文档中，meta是这样定义的。你会发现，效果依然是完美的！
Vue UI制作导航栏教程
Larry_174的博客
12-19 2176
在现代 Web 开发中，用户界面的设计与交互至关重要，而导航栏作为网站或应用的导航枢纽，其设计的合理性与美观性直接影响用户体验。在 Vue UI 界面中，点击左侧菜单栏的 “任务”，然后点击 “serve”，再点击 “运行” 按钮。在 Vue UI 界面中，点击左侧菜单栏的 “项目依赖”，然后点击 “安装插件”。当你点击导航栏中的链接时，页面将根据路由配置进行切换，并且当前激活的链接会显示为红色。如果没有自动打开，请在浏览器中输入。是路由视图的占位符，当用户点击导航栏中的链接时，对应的组件将在这里显示。
vue项目nav导航栏的实现
热门推荐
王永存
09-20 3万+
每一个网页项目都少不了导航栏，通过原始的方法基本上都是可以写出来的。但是要写出代码量少，冗余度低的代码就要动脑子思考一下了。 最近写了一个百度地图的项目，要求底部有一个导航栏。具体如下图： 首先，拿到了底部导航栏的所有图标图片，图片都有两种。灰色的代表未选中，选中的用带样色的图片替换。 先看一下，组件中 html结构：通过vue提供的v-for方法，进行遍历显示footNav
vue实现nav导航栏的方法
08-28
vue实现nav导航栏的方法是指在vue项目中实现导航栏的方法。导航栏是每一个网页项目都少不了的组件，每一个项目都需要实现导航栏的功能。通过原始的方法基本上都是可以写出来的。但是要写出代码量少，冗余度低的代码...
vue实现二级导航栏效果
10-16
本文将深入探讨如何利用Vue.js实现一个二级导航栏效果。 ### Vue.js基础 Vue.js是一个构建用户界面的渐进式框架，其核心库只关注视图层，易于上手，且能够方便地与现有的项目集成。在Vue.js中，组件是核心概念之一...
vue2.0实现导航菜单切换效果
08-30
Vue 2.0 实现导航菜单切换效果 Vue 2.0 是一个流行的前端框架，用于构建复杂的Web应用程序。今天，我们将探讨如何使用 Vue 2.0 实现导航菜单切换效果。 标题解析 标题「Vue 2.0 实现导航菜单切换效果」表明本文的...
vue实现导航标题栏随页面滚动渐隐渐显效果
10-15
通过上述步骤和逻辑，开发者可以轻松地在Vue项目中实现导航栏的渐隐渐显效果，从而提升用户的交互体验。需要注意的是，在实际应用中，可能需要根据具体的设计需求来调整透明度变化的算法以及滚动触发的偏移值范围，...
前端Vue自定义个性化导航栏菜单组件的设计与实现
chenchuang0128的博客
05-29 2337
随着前端技术的飞速发展和业务场景的日益复杂，组件化开发已成为提升开发效率和降低维护成本的关键手段。本文将以Vue uni-app平台为例，介绍如何通过自定义导航栏菜单组件，实现业务逻辑与界面展示的解耦，以及如何通过组件化开发提升系统的可维护性和可扩展性。
Vue：导航栏制作（创建路由，跳转界面）
yyyyyyyyyyy_9的博客
08-04 3460
本文将介绍vue导航栏制作的代码。
Vue开发前端导航栏设计【常见问题+示例代码】
最新发布
keith66的博客
03-06 1395
本文中实现了一个前端代码比较完善的Nav开发，展示了各种可能遇到的问题，希望能对读者有所帮助。
「网页开发｜前端开发｜Vue」05 Vue实战：从零到一实现一个网站导航栏
过美好生活，做高效程序员
09-06 2879
本文主要介绍如何从最开始的草图，通过确定基本结构、修改元素布局、美化外观来实现一个网站导航栏，从而熟悉网页开发的基本流程。同时，我们会把性能、规范性、可维护性方面的代码优化也考虑其中。
VUE （Element-plus）简单实现：页面导航栏
m0_74411635的博客
04-19 3402
打开Visual Studio Code,创建一个vue项目。 选择新建终端，输入npm install element-plus --save 和npm install vue-router 在src/components目录下创建Vueui.vue文件 修改main.js内容 import { createApp } from 'vue' // import './style.css' import App from './components/Vueui.vue' import El
Vue --- 菜单导航栏
zxsy19966的博客
06-29 8619
【vue】菜单导航栏
Vue之导航栏
a271720559的博客
08-07 4812
                                            Vue之导航栏 今天我们来用vue实现简单的导航栏。 效果图： 根据点击的tab来展示对应的内容。其实很简单，用到了vue的v-show和绑定class。 首先创建一个属性“shouDiv” 用来判断显示哪一个tab页。 再为每一个连接注册点击事件：@click="showDiv=1"分别让sho...
vue导航栏组件
qq_45179361的博客
02-09 3495
使用html+css搭建网页导航栏。
vue实现顶部导航栏
呵呵的牛
03-28 1万+
vue实现顶部导航栏
Vue项目实战：初始化与ElementUI导航栏设置
"这篇文档详细解析了前端Vue项目的初始化步骤以及如何使用ElementUI框架来实现导航栏功能。" 在前端开发中，Vue.js是一个流行的渐进式JavaScript框架，用于构建用户界面。Vue项目的初始化通常借助vue-cli工具进行，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值