vue項目實現(xiàn)設置根據(jù)路由高亮對應的菜單項操作
更新時間：2020年08月06日 10:10:25 作者：腎虛少年
這篇文章主要介紹了vue項目實現(xiàn)設置根據(jù)路由高亮對應的菜單項操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
高亮顯示菜單是很常見的一個場景
首先，在router-link標簽上綁定對應的路徑
然后在css里面設置router-link-active類的樣式即可切換路徑的時候高亮對應的菜單
也可以在router路由數(shù)組里面設置meta信息，然后根據(jù)這個信息來判斷是否高亮（這里可以循環(huán)生成菜單，不過我沒有寫）只是說一下思路
這樣即可根據(jù)路由實現(xiàn)對應的菜單高亮了，我個人認為第二種比較靈活，如果菜單嵌套很多可以用第二種
補充知識：vuecli項目怎樣使用jsx
有時候用jsx寫頁面可能更靈活，當然在vue中寫jsx需要插件的支持
我用了一些官方給出的，感覺不怎么好用，推薦安裝這個
安裝babel-plugin-transform-vue-jsx插件
看文檔安裝配置吧
這個配置起來更簡單方便
然后在vue文件組件里面寫
以下就是簡單的jsx語法，不熟悉的可以去看看react的一些基礎，當然，大多數(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)設置根據(jù)路由高亮對應的菜單項操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue使用預渲染代替SSR的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
這篇文章主要介紹了Vue-router編程式導航的實現(xiàn)代碼,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-03
vue.js給動態(tài)綁定的radio列表做批量編輯的方法
下面小編就為大家分享一篇vue.js給動態(tài)綁定的radio列表做批量編輯的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
在項目開發(fā)中有時候需求需要手動實現(xiàn)橫屏功能,所以這篇文章主要為大家詳細介紹了如何使用Vue實現(xiàn)手機橫屏功能,需要的小伙伴可以參考一下2024-03-03
下面小編就為大家分享一篇vue2.0安裝style/css loader的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
在本篇文章里小編給大家整理的是關于vue實現(xiàn)百度語音合成的實例內(nèi)容，以及相關代碼，需要的朋友們參考下。2019-10-10
elementui?el-upload一次請求上傳多個文件的實現(xiàn)
使用ElementUI?Upload的時候發(fā)現(xiàn)如果是默認方案,上傳多張圖片并不是真正的一次上傳多張,本文就來介紹一下elementui?el-upload一次請求上傳多個文件的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2023-10-10
Electron也可以快速地將你的網(wǎng)站打包成一個原生應用發(fā)布,下面這篇文章主要給大家介紹了關于Electron集成React和Vue的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了axios+Vue上傳文件顯示進度效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
應用會對用戶的操作進行反饋，就叫響應式，數(shù)據(jù)變化會實時改變UI，就叫數(shù)據(jù)響應式，修改Vue實例中的數(shù)據(jù)時，視圖會重新渲染，就是Vue的數(shù)據(jù)響應式2022-05-05