Shulou(Shulou.com)06/03 Report--

This article will explain in detail how Vue uses element-ui to achieve menu navigation. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Effect picture

Directory screenshot

Install vue-router and element-ui

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

Npm install vue-router-savenpm install element-ui-save

Turn off ESLint inspection

New profile src/vue.config.js file

Module.exports = {lintOnSave: false}

Src/main.js

Introduce vue-router and element-ui into main.js.

Create two page components, movie and novel.

Defines the route mapping.

Change the route to h6 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 = falseVue.use (VueRouter) Vue.use (ElementUI); const routes = [{path:'/ movie', component: movie}, {path:'/ novel', component: novel}] / / 3. Create a router instance, and then pass `routes` configuration / / you can also pass other configuration parameters, but let's keep it that simple. Const router = new VueRouter ({mode: 'history', / / h6 mode routes / / (abbreviation) is equivalent to routes: routes}) new Vue ({render: h = > h (App), router}). $mount (' # app')

Src/comments/movie.vue

Movie page component

Movie page export default {name: 'movie'}

Src/comments/novel.vue

Novel page component

Novel page export default {name: 'novel'}

Src/comments/NavMenu.vue

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

The v-for loop generates menus, writes v-for in the template tag, and does not copy the current template all the time.

Read other people's blogs are: default-active= "$route.path", I have an extra one here. So remove / in the mounted lifecycle.

{{item.name}} {{item2.name}} 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

Src/App.vue

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

Footer import NavMenu from ". / components/NavMenu.vue"; export default {name: "app", components: {NavMenu}}; .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 } this is the end of the article on "how Vue uses element-ui to achieve menu navigation". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.