Vue uses element-ui to implement menu navigation

Vue uses element-ui to implement menu navigation

This article shares the specific code of Vue using element-ui to implement menu navigation for your reference. The specific content is as follows

Rendering

Catalog screenshots

Install vue-router and element-ui

vue-route is the official routing navigation, element-ui is the vue-based component library encapsulated by Ele.me

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

Turn off ESLint checking

Add a new configuration file src/vue.config.js

module.exports = {
    lintOnSave: false
}

src/main.js

Import vue-router and element-ui into main.js.
Create two page components, Movies and Novels.
Define route maps.
Change the route to h5 mode and remove the ugly # symbol.

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. Create a router instance and pass the `routes` configuration // You can also pass other configuration parameters, but let's keep it simple for now.
const router = new VueRouter({
  mode: 'history', //h5 mode routes // (abbreviation) equivalent to routes: routes
})

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

src/comments/movie.vue

Movie Page Component

<template>
  <div>    
    movie page</div>
</template>

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


<style scoped>

</style>

src/comments/novel.vue

Novel Page Component

<template>
  <div>
    novel page</div>
</template>

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

</style>

src/comments/NavMenu.vue

Navigation component. The element-ui menu component is used here. navMenuData simulates the data of our menu. The default-active attribute represents the currently selected menu, and the router attribute represents that the index is automatically used as the routing path.

v-for loop generates menus. Writing v-for in the template tag will not always copy the current template.

Looking at other people’s blogs, they all have: default-active="$route.path", but I have an extra / here. So remove / during the mounted life cycle.

<template>
  <div id="NavMenu">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      router
    >
      <!-- 
      <el-menu-item index="1">Movies</el-menu-item>
      <el-menu-item index="2">Novel</el-menu-item>
      <el-submenu index="3">
        <template slot="title">My Workbench</template>
        <el-menu-item index="3-1">Option 1</el-menu-item>
        <el-menu-item index="3-2">Option 2</el-menu-item>
        <el-menu-item index="3-3">Option 3</el-menu-item>
        <el-submenu index="3-4">
          <template slot="title">Option 4</template>
          <el-menu-item index="3-4-1">Option 1</el-menu-item>
          <el-menu-item index="3-4-2">Option 2</el-menu-item>
          <el-menu-item index="3-4-3">Option 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: "movie" },
        { index: "novel", name: "novel" },
        {
          index: "2",
          name: "My Workbench",
          child: [{ index: "2-1", name: "Option 1" },{ index: "2-2", name: "Option 2" },{ index: "2-3", name: "Option 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

The element-ui container layout is used here, and the NavMenu menu component written by myself is introduced.

<template>
  <div id="app">
    <el-container>
      <el-header>
        <NavMenu></NavMenu>
      </el-header>
      <el-main>
         <router-view></router-view> <!--Route exit-->
      </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>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Use element-ui's el-menu navigation to refresh the page after selecting to keep the current selection
  • Detailed explanation of the default selection issue of el-select in element-ui
  • About the default selection of element ui's menu default-active

<<:  MySQL backup table operation based on Java

>>:  How to install and configure the supervisor daemon under centos7

Recommend

MySQL series: redo log, undo log and binlog detailed explanation

Implementation of transactions The redo log ensur...

Ubuntu 15.04 opens mysql remote port 3306

Ubuntu 15.04 opens MySQL remote port 3306. All th...

HTML+Sass implements HambergurMenu (hamburger menu)

A few days ago, I watched a video of a foreign gu...

How to prevent Flash from covering HTML div elements

Today when I was writing a flash advertising code,...

Display ellipsis effect when table cell content exceeds (implementation code)

illustrate In front-end development, you often en...

Vue calls the PC camera to realize the photo function

This article example shares the specific code of ...

Detailed explanation of Vue form binding and components

Table of contents 1. What is two-way data binding...

Discuss the application of mixin in Vue

Mixins provide a very flexible way to distribute ...

Solution to the long delay of MySQL database master-slave replication

Preface The delay of MySQL master-slave replicati...

Example of using @media responsive CSS to adapt to various screens

Definition and Use Using @media queries, you can ...

Detailed explanation of MySQL binlog usage

binlog is a binary log file that records all DML ...

Docker uses Supervisor to manage process operations

A Docker container starts a single process when i...

Introduction to JavaScript Number and Math Objects

Table of contents 1. Number in JavaScript 2. Math...

JS realizes picture digital clock

This article example shares the specific code of ...