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. 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:
|
<<: MySQL backup table operation based on Java
>>: How to install and configure the supervisor daemon under centos7
Implementation of transactions The redo log ensur...
Ubuntu 15.04 opens MySQL remote port 3306. All th...
A few days ago, I watched a video of a foreign gu...
Today when I was writing a flash advertising code,...
illustrate In front-end development, you often en...
This article example shares the specific code of ...
Table of contents 1. What is two-way data binding...
The commonly used Oracle10g partitions are: range...
Mixins provide a very flexible way to distribute ...
Preface The delay of MySQL master-slave replicati...
Definition and Use Using @media queries, you can ...
binlog is a binary log file that records all DML ...
A Docker container starts a single process when i...
Table of contents 1. Number in JavaScript 2. Math...
This article example shares the specific code of ...