Vue中el-menu-item實現路由跳轉的完整步驟

2022-09-20 22:01:50

場景：

用了element-ui的el-menu 選單怎樣實現路由跳轉呢？

方法如下：

1，在el-menu加上router，新增el-menu的default-active屬性，加：動態繫結，值設定為"this.$router.path" ，

2，將el-menu-item的index設定為路由跳轉path，和route.js相對應

程式碼：

<el-menu router
        :default-active="this.$router.path"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>導航一</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/xieyituigai" >協定退改</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <template slot="title">酒店</template>
            <el-menu-item index="/form">酒店預訂</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">導航二</span>
        </el-menu-item>
      </el-menu>

補充：el-menu-item 實現水平導航欄，路由的跳轉

<el-menu
      class="el-menu-vertical-demo"
     id="topNav"
      router
      background-color='#ededed'
      text-color='#000000'
      mode="horizontal"
      :default-active="activeIndex"
    >
    <el-menu-item v-for="item in topArray" :key="item.key" :index="item.name"  class="contentShow">
      <template>
        <span :key="item.key" >{{item.name}}</span>
        <img src="../image/outPage.png" :key="item.key">
      </template>
    </el-menu-item>
  </el-menu>

做了一個專案，是左側導航樹進行點選後，上方出現相應的模組，可進行跳轉，而且是動態進行新增的，效果圖如下：

總結

到此這篇關於Vue中el-menu-item實現路由跳轉的文章就介紹到這了,更多相關Vue el-menu-item路由跳轉內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

Vue中el-menu-item實現路由跳轉的完整步驟

目錄

場景：

方法如下：

補充：el-menu-item 實現水平導航欄，路由的跳轉

總結

熱門文章