vue中的路由跳轉(zhuǎn)tabBar圖片和文字的高亮效果
更新時間：2022年10月09日 09:28:46 作者：The_more_more
這篇文章主要介紹了vue中的路由跳轉(zhuǎn)tabBar圖片和文字的高亮效果，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
前言
在pc端和移動端的項目里面會遇見導(dǎo)航欄或者tabBar的點擊跳轉(zhuǎn)，圖片和文字的高亮效果，對于小程序來說可以直接創(chuàng)建和修改圖片和文字的高亮效果，也可以使用相應(yīng)的組件庫去自定義一些效果，而在pc端和移動端的來說需要對導(dǎo)航欄或者tabBar進行一定的封裝，使其成為全局組件的使用，結(jié)合組件間的數(shù)據(jù)傳遞可以實現(xiàn)不同頁面的不同信息的展示，本篇文章介紹路由跳轉(zhuǎn)的時候，使圖片和文字的高亮效果的方法
定義基本的組件
在demo的初期，我們需要在項目的components文件夾下創(chuàng)建封裝的tabBar組件，創(chuàng)建文件myTabbar.vue，接下來需要在main.js入口文件引入注冊：
// 引入全局組件tabBar
import myTabbar from '@/components/myTabbar'
Vue.component('myTabbar', myTabbar)接下來需要我們簡單書寫myTabbar.vue的樣式結(jié)構(gòu)：
<template>
<div class="tabBar">
<ul>
<li v-for="(item, index) in list" :key="index" @click="change(item.path)">
<img :src="item.selected" />
<span>{{ item.title }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{
title: '首頁',
path: '/home', // 需要跳轉(zhuǎn)的地址
active: '../images/home.png', // 這里填寫未選擇圖片的路徑
selected: '../images/home-a.png' // 這里填寫選擇圖片的路徑，這里以vue圖標(biāo)為例
},
{
title: '分類',
path: '/demo',
active: '../images/home.png', // 這里填寫未選擇圖片的路徑
selected: '../images/home-a.png' // 這里填寫選擇圖片的路徑，這里以vue圖標(biāo)為例
},
{
title: '購物車',
path: '/cart',
active: '../images/home.png', // 這里填寫未選擇圖片的路徑
selected: '../images/home-a.png' // 這里填寫選擇圖片的路徑，這里以vue圖標(biāo)為例
},
{
title: '我們',
path: '/my',
active: '../images/home.png', // 這里填寫未選擇圖片的路徑
selected: '../images/home-a.png' // 這里填寫選擇圖片的路徑，這里以vue圖標(biāo)為例
}
]
}
},
methods: {
change(path) {
this.$router.push(path) // 這種可以后退 和以下的方法選一即可
// if(this.$router.path === path) return // 無痕瀏覽
// this.$router.replace(path)
}
}
}
</script>
<style scoped>
.tabBar {
position: fixed;
width: 100%;
height: 70px;
left: 0;
bottom: 0;
display: flex;
z-index: 999;
}
.tabBar ul {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
.tabBar ul li {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: space-around;
}
.tabBar ul li img {
width: 30px;
height: 100%;
margin-bottom: 5px;
}
.tabBar ul li span {
font-size: 15px;
}
</style>
這里需要注意，圖片需要存入public文件夾的images文件夾內(nèi)部，在路由組件做好相應(yīng)的路由規(guī)則，點擊之后就可以跳轉(zhuǎn)了
文字高亮效果
圖片的高亮效果可以通過更改路徑來實現(xiàn)，文字的高亮效果需要邏輯來實現(xiàn)
首先定義一個active的class樣式：
.active {
color: red;
}修改li：
<li v-for="(item, index) in list" :key="index" @click="change(item.path)">
<img :src="$route.path.includes(item.path) ? item.selected : item.active" />
<span :class="$route.path.includes(item.path) ? 'active' : ''">{{ item.title }}</span>
</li>在配置路由的入口文件的配置路由添加：
// 配置路由
export default new VueRouter({
linkActiveClass: 'active',
// linkExactActiveClass: 'active',
// 配置路由
routes: [...]
})linkActiveClass是模糊匹配linkExactActiveClass是精準(zhǔn)匹配
這樣兩者的搭配就可以實現(xiàn)點擊不同區(qū)域的圖片和文字就會出現(xiàn)高亮的效果
實例效果，這里稍微修改了一點樣式：
這種效果在PC端多用于導(dǎo)航欄，在移動端多用于tabBar，如果是移動端我們需要使用rem等系列手法轉(zhuǎn)換單位。
完整代碼
myTabbar.vue的代碼：
<template>
<div class="tabBar">
<ul>
<li v-for="(item, index) in list" :key="index" @click="change(item.path)">
<img :src="$route.path.includes(item.path) ? item.selected : item.active" />
<span :class="$route.path.includes(item.path) ? 'active' : ''">{{ item.title }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{
title: '首頁',
path: '/home', // 需要跳轉(zhuǎn)的地址
active: '../images/home.png', // 這里填寫未選擇圖片的路徑
selected: '../images/home-a.png' // 這里填寫選擇圖片的路徑，這里以vue圖標(biāo)為例
},
{
title: '分類',
path: '/demo',
active: '../images/home.png', // 這里填寫未選擇圖片的路徑
selected: '../images/home-a.png' // 這里填寫選擇圖片的路徑，這里以vue圖標(biāo)為例
},
{
title: '購物車',
path: '/cart',
active: '../images/home.png', // 這里填寫未選擇圖片的路徑
selected: '../images/home-a.png' // 這里填寫選擇圖片的路徑，這里以vue圖標(biāo)為例
},
{
title: '我們',
path: '/my',
active: '../images/home.png', // 這里填寫未選擇圖片的路徑
selected: '../images/home-a.png' // 這里填寫選擇圖片的路徑，這里以vue圖標(biāo)為例
}
]
}
},
methods: {
change(path) {
this.$router.push(path) // 這種可以后退
// if(this.$router.path === path) return // 無痕瀏覽
// this.$router.replace(path)
}
}
}
</script>
<style scoped>
.tabBar {
position: fixed;
width: 100%;
height: 70px;
left: 0;
bottom: 0;
display: flex;
background: #ccc;
z-index: 999;
}
.tabBar ul {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
.tabBar ul li {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: space-around;
}
.tabBar ul li img {
width: 30px;
height: 100%;
margin-bottom: 5px;
}
.tabBar ul li span {
font-size: 15px;
}
.active {
color: red;
}
</style>
路由入口文件的代碼：
// 配置路由
export default new VueRouter({
? linkActiveClass: 'active',
? // linkExactActiveClass: 'active',
? // 配置路由
? routes: [...]
})全局引入的代碼：
// 引入全局組件tabBar
import myTabbar from '@/components/myTabbar'
Vue.component('myTabbar', myTabbar)以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3.0使用taro-ui-vue3引入組件不生效的問題及解決
這篇文章主要介紹了vue3.0使用taro-ui-vue3引入組件不生效的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
基于Vue+ElementUI的省市區(qū)地址選擇通用組件
這篇文章主要介紹了基于Vue+ElementUI的省市區(qū)地址選擇通用組件，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了在vue自定義組件中使用?v-model指令詳情，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-06-06
本篇文章主要介紹了vue-router 路由元信息，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
本篇文章主要介紹了vue.js之vue-cli腳手架的搭建詳解，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了vue項目中?jsconfig.json是什么,本文僅僅簡單介紹了?jsconfig?.json?的一些基本配置，而?jsconfig?.json提供了大量能使我們快速便捷提高代碼效率的方法，需要的朋友可以參考下2022-07-07
Vue中對象數(shù)組改變其對象內(nèi)容值數(shù)組沒變化的原因與解決方案
最近開發(fā)遇到一個問題,修改對象某一個索引對象時,直接將對象賦值給數(shù)組的某一索引對象,該數(shù)組沒變化,在 Vue 中,直接修改對象數(shù)組中某個對象的屬性值時,數(shù)組的引用本身未改變,本文介紹了詳細的原理分析和解決方案,需要的朋友可以參考下2025-03-03
使用provide/inject實現(xiàn)跨組件通信的方法
在 Vue 應(yīng)用中,組件間通信是構(gòu)建復(fù)雜應(yīng)用時的一個常見需求,Vue3.x 提供了provide和inject API,讓跨組件通信變得更加簡潔和高效,本文將深入探討如何使用provide和inject在Vue3.x中實現(xiàn)跨組件通信,并通過示例代碼一步步進行說明,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了用vue快速開發(fā)app的腳手架工具，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要為大家詳細介紹了vue引入Excel表格插件的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04