vue項(xiàng)目實(shí)現(xiàn)設(shè)置根據(jù)路由高亮對(duì)應(yīng)的菜單項(xiàng)操作
高亮顯示菜單是很常見(jiàn)的一個(gè)場(chǎng)景
首先，在router-link標(biāo)簽上綁定對(duì)應(yīng)的路徑
然后在css里面設(shè)置router-link-active類(lèi)的樣式即可切換路徑的時(shí)候高亮對(duì)應(yīng)的菜單
也可以在router路由數(shù)組里面設(shè)置meta信息，然后根據(jù)這個(gè)信息來(lái)判斷是否高亮（這里可以循環(huán)生成菜單，不過(guò)我沒(méi)有寫(xiě)）只是說(shuō)一下思路
這樣即可根據(jù)路由實(shí)現(xiàn)對(duì)應(yīng)的菜單高亮了，我個(gè)人認(rèn)為第二種比較靈活，如果菜單嵌套很多可以用第二種
補(bǔ)充知識(shí)：vuecli項(xiàng)目怎樣使用jsx
有時(shí)候用jsx寫(xiě)頁(yè)面可能更靈活，當(dāng)然在vue中寫(xiě)jsx需要插件的支持
我用了一些官方給出的，感覺(jué)不怎么好用，推薦安裝這個(gè)
安裝babel-plugin-transform-vue-jsx插件
看文檔安裝配置吧
這個(gè)配置起來(lái)更簡(jiǎn)單方便
然后在vue文件組件里面寫(xiě)
以下就是簡(jiǎn)單的jsx語(yǔ)法，不熟悉的可以去看看react的一些基礎(chǔ)，當(dāng)然，大多數(shù)時(shí)候模板也是很好用的
而且vue中的方法自動(dòng)綁定了this，感覺(jué)混用也不錯(cuò)
<script>
export default {
name: "MyJsx",
data () {
return {
msg: 'hello vue-jsx'
};
},
methods: {
handleClick () {
console.log(this);
}
},
render () {
return (
<div on-click={this.handleClick}>{this.msg}</div>
)
}
};
</script>
以上這篇vue項(xiàng)目實(shí)現(xiàn)設(shè)置根據(jù)路由高亮對(duì)應(yīng)的菜單項(xiàng)操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue前端對(duì)axios的封裝和使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
SpringBoot+Vue3實(shí)現(xiàn)文件的上傳和下載功能
上傳文件和下載文件是我們平時(shí)經(jīng)常用到的功能，接下來(lái)就讓我們用SpringBoot，Vue3和ElementPlus組件實(shí)現(xiàn)文件的上傳和下載功能吧，感興趣的朋友跟隨小編一起看看吧2023-01-01
過(guò)濾器的功能是對(duì)要顯示的數(shù)據(jù)進(jìn)行格式化后再顯示,其并沒(méi)有改變?cè)镜臄?shù)據(jù),只是產(chǎn)生新的對(duì)應(yīng)的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于Vue中過(guò)濾器定義以及使用方法的相關(guān)資料,需要的朋友可以參考下2022-11-11
Vue?動(dòng)畫(huà)效果、過(guò)渡效果的示例代碼
這篇文章主要介紹了Vue?動(dòng)畫(huà)效果、過(guò)渡效果,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-04-04
本文通過(guò)實(shí)例代碼介紹對(duì)el-table表格的表頭操作方法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-03-03
詳解關(guān)于vue-area-linkage走過(guò)的坑
這篇文章主要介紹了詳解關(guān)于vue-area-linkage走過(guò)的坑，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
vue打包c(diǎn)hunk-vendors.js文件過(guò)大導(dǎo)致頁(yè)面加載緩慢的解決
這篇文章主要介紹了vue打包c(diǎn)hunk-vendors.js文件過(guò)大導(dǎo)致頁(yè)面加載緩慢的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要給大家介紹了關(guān)于Vue-CLI多頁(yè)分目錄打包的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要介紹了vue 源碼解析 --虛擬Dom-render的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
Vue+Element UI實(shí)現(xiàn)下拉菜單的封裝
這篇文章主要為大家詳細(xì)介紹了Vue+Element UI實(shí)現(xiàn)下拉菜單的封裝代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09