快捷導(dǎo)航

Vue中el-menu-item實(shí)現(xiàn)路由跳轉(zhuǎn)的完整步驟

更新時(shí)間：2022年09月20日 14:31:02 作者：小羊羊.

這篇文章主要給大家介紹了關(guān)于Vue中el-menu-item實(shí)現(xiàn)路由跳轉(zhuǎn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

場景：

用了element-ui的el-menu 菜單怎樣實(shí)現(xiàn)路由跳轉(zhuǎn)呢？

方法如下：

1，在el-menu加上router，添加el-menu的default-active屬性，加：動(dòng)態(tài)綁定，值設(shè)置為"this.$router.path" ，

2，將el-menu-item的index設(shè)置為路由跳轉(zhuǎn)path，和route.js相對應(yīng)

代碼：

<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>導(dǎo)航一</span>
? ? ? ? ? </template>
? ? ? ? ? <el-menu-item-group>
? ? ? ? ? ? <el-menu-item index="/xieyituigai" >協(xié)議退改</el-menu-item>
? ? ? ? ? </el-menu-item-group>
? ? ? ? ? <el-submenu index="1-4">
? ? ? ? ? ? <template slot="title">酒店</template>
? ? ? ? ? ? <el-menu-item index="/form">酒店預(yù)訂</el-menu-item>
? ? ? ? ? </el-submenu>
? ? ? ? </el-submenu>
? ? ? ? <el-menu-item index="2">
? ? ? ? ? <i class="el-icon-menu"></i>
? ? ? ? ? <span slot="title">導(dǎo)航二</span>
? ? ? ? </el-menu-item>
? ? ? </el-menu> ?

補(bǔ)充：el-menu-item 實(shí)現(xiàn)水平導(dǎo)航欄，路由的跳轉(zhuǎn)

<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>

做了一個(gè)項(xiàng)目，是左側(cè)導(dǎo)航樹進(jìn)行點(diǎn)擊后，上方出現(xiàn)相應(yīng)的模塊，可進(jìn)行跳轉(zhuǎn)，而且是動(dòng)態(tài)進(jìn)行添加的，效果圖如下：

總結(jié)

到此這篇關(guān)于Vue中el-menu-item實(shí)現(xiàn)路由跳轉(zhuǎn)的文章就介紹到這了,更多相關(guān)Vue el-menu-item路由跳轉(zhuǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: