高亮顯示菜單是很常見(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插件

GitHub地址

看文檔安裝配置吧

這個(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è)參考，也希望大家多多支持好吧啦網(wǎng)。