高亮顯示選單是很常見的一個場景

首先，在router-link標籤上繫結對應的路徑

然後在css裡面設定router-link-active類的樣式即可切換路徑的時候高亮對應的選單

也可以在router路由數組裡面設定meta資訊，然後根據這個資訊來判斷是否高亮（這裡可以迴圈生成選單，不過我沒有寫）只是說一下思路

這樣即可根據路由實現對應的選單高亮了，我個人認為第二種比較靈活，如果選單巢狀很多可以用第二種

補充知識：vuecli專案怎樣使用jsx

有時候用jsx寫頁面可能更靈活，當然在vue中寫jsx需要外掛的支援

我用了一些官方給出的，感覺不怎麼好用，推薦安裝這個

安裝babel-plugin-transform-vue-jsx外掛

GitHub地址

看文件安裝配置吧

這個配置起來更簡單方便

然後在vue檔案元件裡面寫

以下就是簡單的jsx語法，不熟悉的可以去看看react的一些基礎，當然，大多數時候模板也是很好用的

而且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專案實現設定根據路由高亮對應的選單項操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。