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