培训网站建设方案模板下载,门户网站后台管理模板,百度如何才能搜索到你的网站,麻涌镇网站建设文章目录前言一、elementui Tabs标签页和NavMenu 导航菜单是什么#xff1f;二、使用方式1.代码如下2.页面效果总结前言
写上一篇bloghttps://blog.csdn.net/jianyuwuyi/article/details/128959803的时候因为整个前端都写在一个index.html页面里#xff0c;为了写更少的代码…
文章目录前言一、elementui Tabs标签页和NavMenu 导航菜单是什么二、使用方式1.代码如下2.页面效果总结前言
写上一篇bloghttps://blog.csdn.net/jianyuwuyi/article/details/128959803的时候因为整个前端都写在一个index.html页面里为了写更少的代码还有看起来更简洁做了许多偷懒操作比如用elementui 的Tabs标签页当NavMenu 导航菜单用虽然效果上看起来差不多但是导航菜单功能更强大也更能体现出CDN模式下vue的router、templete的挂载状态这样才能更好的学习vue、vue-router开发页面较少的项目时还可以用这种方式少写很多代码。当然也是为了以后用起vue来更顺手。
一、elementui Tabs标签页和NavMenu 导航菜单是什么
官方文档https://element.eleme.cn/#/zh-CN/component/menu
二、使用方式
1.代码如下
就这一个页面
!DOCTYPE html
html
headmeta charsetUTF-8!-- import CSS --link relstylesheet hrefhttps://unpkg.com/element-ui/lib/theme-chalk/index.css
/head
body
div idapprouter-view/router-view
/div
/body
template idsigndiv classhandlediv classhandle-inputel-button clicklogin plain登录/el-button/div/div
/template
template idmanagerdivel-menu:default-activethis.$router.pathclassel-menu-demomodehorizontalrouterselecthandleSelectbackground-color#545c64text-color#fffactive-text-color#ffd04bel-menu-item index/manager/manager1用户管理/el-menu-itemel-menu-item index/manager/manager2角色管理/el-menu-itemel-menu-item index/manager/manager3权限管理/el-menu-item/el-menurouter-view/router-view/div
/template
template idmanager1span模板1用户管理/span
/template
template idmanager2span模板2角色管理/span
/template
template idmanager3span模板3权限管理/span
/template!-- import Vue before Element --
script srchttps://unpkg.com/vue2/dist/vue.js/script
!-- import JavaScript --
script srchttps://unpkg.com/element-ui/lib/index.js/script
!-- import Axios --
script srchttps://unpkg.com/axios/dist/axios.min.js/script
!-- import Router --
script srchttps://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js/script
scriptconst Sign {props: [todo],template: #sign,data() {return {username: }},methods: {login() {this.$router.push({name: manager,params: {}});}},mounted() {console.log(组件Sign被挂载了);}};const Manager {props: [todo],template: #manager,data() {return {activeIndex: 1}},methods: {handleSelect(key, keyPath) {console.log(key, keyPath);}},mounted() {console.log(组件Manager被挂载了);},created() {}};const Manager1 {props: [todo],template: #manager1,data() {return {token: }},methods: {},mounted() {console.log(组件Manager1被挂载了);},created() {}};const Manager2 {props: [todo],template: #manager2,data() {return {token: }},methods: {},mounted() {console.log(组件Manager2被挂载了);},created() {}};const Manager3 {props: [todo],template: #manager3,data() {return {token: }},methods: {},mounted() {console.log(组件Manager3被挂载了);},created() {}};const router new VueRouter({routes:[{path: /,name: sign,component: Sign},{path: /manager,name: manager,component: Manager,children:[{path: manager1,component: Manager1},{path: manager2,component: Manager2},{path: manager3,component: Manager3}]}]});new Vue({router,el: #app,data: {},methods: {}});
/script
style.handle {position: absolute;width: 100%;height: 100%;top: 0;left: 0;margin: 0;background-image: url(banner.jpg);background-position: center;background-repeat: no-repeat;background-size: cover;overflow: hidden;display: flex;justify-content: center;align-items: center;}.handle-input {display: flex;flex-direction: column;}
/style
/html2.页面效果 总结
这回贴的代码简洁明了了没啥好总结的。哦还有如果标签页还需要携带参数的话可以参考这篇文章https://blog.csdn.net/qq_40197100/article/details/111587781 或者在el-menu-item标签里写个click事件直接调路由。
