Vue使用element-ui實現選單導航

2021-09-27 13:00:57

本文範例為大家分享了Vue使用element-ui實現選單導航的具體程式碼，供大家參考，具體內容如下

效果圖

目錄截圖

安裝vue-router 和 element-ui

vue-route是官方路由導航,element-ui是餓了麼封裝的基於vue的元件庫

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

關閉ESLint檢查

新增組態檔src/vue.config.js 檔案

module.exports = {
    lintOnSave: false
}

src/main.js

在main.js裡引入vue-router 和 element-ui。
建立兩個頁面元件，電影和小說。
定義路由對映。
路由改成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. 建立 router 範例，然後傳 `routes` 設定
// 你還可以傳別的設定引數, 不過先這麼簡單著吧。
const router = new VueRouter({
  mode: 'history',  //h5模式
  routes // (縮寫) 相當於 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

導航元件。這裡使用了element-ui的選單元件。navMenuData模擬了我們選單的資料。屬性default-active代表當前選中的選單,router屬性代表index自動當成路由路徑。

v-for迴圈生成選單,在template標籤中寫v-for,不會一直複製當前的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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

Vue使用element-ui實現選單導航

熱門文章