Vue使用element-ui實現(xiàn)菜單導(dǎo)航

更新時間：2021年09月27日 11:43:15 作者：簡單碼

這篇文章主要為大家詳細介紹了Vue使用element-ui實現(xiàn)菜單導(dǎo)航，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue使用element-ui實現(xiàn)菜單導(dǎo)航的具體代碼，供大家參考，具體內(nèi)容如下

效果圖

目錄截圖

安裝vue-router 和 element-ui

vue-route是官方路由導(dǎo)航,element-ui是餓了么封裝的基于vue的組件庫

npm install vue-router --save
npm install element-ui --save

關(guān)閉ESLint檢查

新增配置文件src/vue.config.js 文件

module.exports = {
    lintOnSave: false
}

src/main.js

在main.js里引入vue-router 和 element-ui。
創(chuàng)建兩個頁面組件，電影和小說。
定義路由映射。
路由改成h5模式，去掉難看的#符號。

import Vue from 'vue'
import App from './App.vue'

import VueRouter from 'vue-router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'


import movie from './components/movie.vue'
import novel from './components/novel.vue'

Vue.config.productionTip = false

Vue.use(VueRouter)
Vue.use(ElementUI);

const routes = [
  { path: '/movie', component: movie },
  { path: '/novel', component: novel }
]

// 3. 創(chuàng)建 router 實例，然后傳 `routes` 配置
// 你還可以傳別的配置參數(shù), 不過先這么簡單著吧。
const router = new VueRouter({
  mode: 'history',  //h5模式
  routes // (縮寫) 相當(dāng)于 routes: routes
})

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

src/comments/movie.vue

電影頁面組件

<template>
  <div>    
    movie頁面
  </div>
</template>

<script>
export default {
  name: 'movie' 
}
</script>


<style scoped>

</style>

src/comments/novel.vue

小說頁面組件

<template>
  <div>
    novel頁面
  </div>
</template>

<script>
export default {
  name: 'novel'  
}
</script>
<style scoped>

</style>

src/comments/NavMenu.vue

導(dǎo)航組件。這里使用了element-ui的菜單組件。navMenuData模擬了我們菜單的數(shù)據(jù)。屬性default-active代表當(dāng)前選中的菜單,router屬性代表index自動當(dāng)成路由路徑。

v-for循環(huán)生成菜單,在template標(biāo)簽中寫v-for,不會一直復(fù)制當(dāng)前的template。

看別人博客都是:default-active="$route.path",我這里多了個/。所以在mounted生命周期里去除/。

<template>
  <div id="NavMenu">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      router
    >
      <!-- 
      <el-menu-item index="1">電影</el-menu-item>
      <el-menu-item index="2">小說</el-menu-item>
      <el-submenu index="3">
        <template slot="title">我的工作臺</template>
        <el-menu-item index="3-1">選項1</el-menu-item>
        <el-menu-item index="3-2">選項2</el-menu-item>
        <el-menu-item index="3-3">選項3</el-menu-item>
        <el-submenu index="3-4">
          <template slot="title">選項4</template>
          <el-menu-item index="3-4-1">選項1</el-menu-item>
          <el-menu-item index="3-4-2">選項2</el-menu-item>
          <el-menu-item index="3-4-3">選項3</el-menu-item>
        </el-submenu>
      </el-submenu> 
      -->

      <template v-for="item in navMenuData">
        <el-menu-item :index="item.index" v-if="!item.child">{{item.name}}</el-menu-item>

        <el-submenu :index="item.index" v-if="item.child">
          <template slot="title">{{item.name}}</template>
          <template v-for="item2 in item.child">
            <el-menu-item :index="item2.index">{{item2.name}}</el-menu-item>
          </template>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "NavMenu",
  data() {
    return {
      activeIndex: "movie",     
      navMenuData: [
        { index: "movie", name: "電影" },
        { index: "novel", name: "小說" },
        {
          index: "2",
          name: "我的工作臺",
          child: [{ index: "2-1", name: "選項1" },{ index: "2-2", name: "選項2" },{ index: "2-3", name: "選項3" }]
        },
       
      ]
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  mounted(){         
      console.log(this.activeIndex)        
      console.log(this.$route.path)      
      this.activeIndex = this.$route.path.substring(1,this.$route.path.length);     

  }
};
</script>

<style scoped>
</style>

src/App.vue

這里使用了element-ui的容器布局,引入了自己寫的NavMenu菜單組件。

<template>
  <div id="app">
    <el-container>
      <el-header>
        <NavMenu></NavMenu>
      </el-header>
      <el-main>
         <router-view></router-view> <!--路由出口 -->
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
import NavMenu from "./components/NavMenu.vue";

export default {
  name: "app",
  components: {
    NavMenu
  }
};
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  height: 100px;
  padding: 0px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

</style>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: