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使用預(yù)渲染代替SSR的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
Vue-router編程式導(dǎo)航的兩種實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue-router編程式導(dǎo)航的實(shí)現(xiàn)代碼,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-03-03
vue.js給動(dòng)態(tài)綁定的radio列表做批量編輯的方法
下面小編就為大家分享一篇vue.js給動(dòng)態(tài)綁定的radio列表做批量編輯的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
淺析vue如何實(shí)現(xiàn)手機(jī)橫屏功能
在項(xiàng)目開(kāi)發(fā)中有時(shí)候需求需要手動(dòng)實(shí)現(xiàn)橫屏功能,所以這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)手機(jī)橫屏功能,需要的小伙伴可以參考一下2024-03-03
下面小編就為大家分享一篇vue2.0安裝style/css loader的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue實(shí)現(xiàn)百度語(yǔ)音合成的實(shí)例講解
在本篇文章里小編給大家整理的是關(guān)于vue實(shí)現(xiàn)百度語(yǔ)音合成的實(shí)例內(nèi)容，以及相關(guān)代碼，需要的朋友們參考下。2019-10-10
elementui?el-upload一次請(qǐng)求上傳多個(gè)文件的實(shí)現(xiàn)
使用ElementUI?Upload的時(shí)候發(fā)現(xiàn)如果是默認(rèn)方案,上傳多張圖片并不是真正的一次上傳多張,本文就來(lái)介紹一下elementui?el-upload一次請(qǐng)求上傳多個(gè)文件的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10
Electron也可以快速地將你的網(wǎng)站打包成一個(gè)原生應(yīng)用發(fā)布,下面這篇文章主要給大家介紹了關(guān)于Electron集成React和Vue的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
axios+Vue實(shí)現(xiàn)上傳文件顯示進(jìn)度功能
這篇文章主要介紹了axios+Vue上傳文件顯示進(jìn)度效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
應(yīng)用會(huì)對(duì)用戶的操作進(jìn)行反饋，就叫響應(yīng)式，數(shù)據(jù)變化會(huì)實(shí)時(shí)改變UI，就叫數(shù)據(jù)響應(yīng)式，修改Vue實(shí)例中的數(shù)據(jù)時(shí)，視圖會(huì)重新渲染，就是Vue的數(shù)據(jù)響應(yīng)式2022-05-05