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圖標為例
},
{
title: '分類',
path: '/demo',
active: '../images/home.png', // 這里填寫未選擇圖片的路徑
selected: '../images/home-a.png' // 這里填寫選擇圖片的路徑，這里以vue圖標為例
},
{
title: '購物車',
path: '/cart',
active: '../images/home.png', // 這里填寫未選擇圖片的路徑
selected: '../images/home-a.png' // 這里填寫選擇圖片的路徑，這里以vue圖標為例
},
{
title: '我們',
path: '/my',
active: '../images/home.png', // 這里填寫未選擇圖片的路徑
selected: '../images/home-a.png' // 這里填寫選擇圖片的路徑，這里以vue圖標為例
}
]
}
},
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是精準匹配
這樣兩者的搭配就可以實現(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圖標為例
},
{
title: '分類',
path: '/demo',
active: '../images/home.png', // 這里填寫未選擇圖片的路徑
selected: '../images/home-a.png' // 這里填寫選擇圖片的路徑，這里以vue圖標為例
},
{
title: '購物車',
path: '/cart',
active: '../images/home.png', // 這里填寫未選擇圖片的路徑
selected: '../images/home-a.png' // 這里填寫選擇圖片的路徑，這里以vue圖標為例
},
{
title: '我們',
path: '/my',
active: '../images/home.png', // 這里填寫未選擇圖片的路徑
selected: '../images/home-a.png' // 這里填寫選擇圖片的路徑，這里以vue圖標為例
}
]
}
},
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)文章
這篇文章主要介紹了vue如何實現(xiàn)關(guān)閉對話框后刷新列表，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
如何使用vue slot創(chuàng)建一個模態(tài)框的實例代碼
這篇文章主要介紹了如何使用vue slot創(chuàng)建一個模態(tài)框,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-05
本文主要介紹了vue3+pinia用戶信息持久緩存token的問題解決,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要為大家詳細介紹了Vue方法與事件處理器，,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
使用this.$nextTick()獲取不到數(shù)據(jù)更新后的this.$refs.xxx.及場景分析
今天遇到了這樣一個場景，在數(shù)據(jù)更新之后，使用this.$nextTick(()=>{console.log(this.$refs.xxx)}) 獲取不到改dom，但是用setTimeout能夠獲取到，在此記錄一下，感興趣的朋友跟隨小編一起看看吧2023-02-02
這篇文章主要給大家介紹了關(guān)于Vue3的vite中圖片動態(tài)加載3種方式的相關(guān)資料,圖片進入可視區(qū)域,進行動態(tài)加載圖片操作,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11
Vue.js 2.0窺探之Virtual DOM到底是什么？
大家可能聽說Vue.js 2.0已經(jīng)發(fā)布，并且在其中新添加如了一些新功能。其中一個功能就是“Virtual DOM”。那么下面這篇文章就來給大家詳細介紹Vue.js 2.0中的Virtual DOM到底是什么？需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02
基于vue監(jiān)聽滾動事件實現(xiàn)錨點鏈接平滑滾動的方法
本篇文章主要介紹了基于vue監(jiān)聽滾動事件實現(xiàn)錨點鏈接平滑滾動的方法，非常具有實用價值，有興趣的可以了解一下2018-01-01
本篇文章主要介紹了如何解決vue與傳統(tǒng)jquery插件沖突，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
解決vue中修改了數(shù)據(jù)但視圖無法更新的情況
今天小編就為大家分享一篇解決vue中修改了數(shù)據(jù)但視圖無法更新的情況，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08