营销型网站建设软件,网站建设移交内容,国企广告公司有哪些,个人网站界面设计图片Vue2项目练手——通用后台管理项目 路由限制重复跳转CommonAside.vue 顶部header组件搭建与样式修改右边用户菜单栏使用的组件图片CommonHeader.vue Vuex实现左侧折叠文件目录store/index.jsstore/tab.jsmain.jsCommonHeader.vueCommonAside.vueMain.vue 路由限制重复跳转
路由… Vue2项目练手——通用后台管理项目 路由限制重复跳转CommonAside.vue 顶部header组件搭建与样式修改右边用户菜单栏使用的组件图片CommonHeader.vue Vuex实现左侧折叠文件目录store/index.jsstore/tab.jsmain.jsCommonHeader.vueCommonAside.vueMain.vue 路由限制重复跳转
路由重复跳转会出现bug 解决路由重复bug问题
clickMenu(item){// console.log(item)// console.log(this.$route.path)// 当页面的路由与跳转的路由不一致才允许跳转if(this.$route.path!item.path !(this.$route.path/home(item.path/))){this.$router.push(item.path)}}CommonAside.vue
templateel-menu default-active1-4-1 classel-menu-vertical-demo openhandleOpen closehandleClose:collapseisCollapse background-color#545c64 text-color#fffactive-text-color#ffd04bh3通用后台管理系统/h3el-menu-item clickclickMenu(item) v-foritem in noChildren :keyitem.name :indexitem.namei :classel-icon-${item.icon}/ispan slottitle{{item.label}}/span/el-menu-itemel-submenu :indexitem.label v-foritem in hasChildren :keyitem.labeltemplate slottitlei :classel-icon-${item.icon}/ispan slottitle{{item.label}}/span/templateel-menu-item-groupel-menu-item clickclickMenu(subItem) :indexsubItem.path :keysubItem.path v-forsubItem in item.children{{subItem.label}}/el-menu-item/el-menu-item-group/el-submenu/el-menu/templatestyle langless scoped
.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;
}
.el-menu{height: 100vh; //占据页面高度100%h3{color: #fff;text-align: center;line-height: 48px;font-size: 16px;font-weight: 400;}
}
/stylescript
export default {data() {return {isCollapse: false,menuData:[{path:/,name:home,label:首页,icon:s-home,url:Home/Home},{path:/mall,name:mall,label:商品管理,icon:video-play,url:MallManage/MallManage},{path:/user,name:user,label:用户管理,icon:user,url:userManage/userManage},{label:其他,icon:location,children:[{path:/page1,name:page1,label:页面1,icon:setting,url:Other/PageOne},{path:/page2,name:page2,label:页面2,icon:setting,url:Other/PageTwo},]},]};},methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);},clickMenu(item){// console.log(item)// console.log(this.$route.path)// 当页面的路由与跳转的路由不一致才允许跳转if(this.$route.path!item.path !(this.$route.path/home(item.path/))){this.$router.push(item.path)}}},mounted() {console.log(this.$route.path)},computed:{//没有子菜单的数据noChildren(){return this.menuData.filter(item!item.children)},//有子菜单数组hasChildren(){return this.menuData.filter(itemitem.children)}}
}
/script顶部header组件搭建与样式修改
右边用户菜单栏
使用的组件 图片 CommonHeader.vue
templatediv classheader-containerdiv classl-contentel-button iconel-icon-menu sizemini/el-button!-- 面包屑--span classtext首页/span/divdiv classr-contentel-dropdownspan classel-dropdown-linkimg src/assets/user.webp alt/spanel-dropdown-menu slotdropdownel-dropdown-item个人中心/el-dropdown-itemel-dropdown-item退出/el-dropdown-item/el-dropdown-menu/el-dropdown/div/div/templatescript
export default {name: CommonHeader,
}
/scriptstyle scoped langless
.header-container {height: 60px;background-color: #333;display: flex;justify-content: space-between;align-items: center;padding: 0 20px;.text {color: #fff;font-size: 14px;margin-left: 10px;}.r-content{img{width: 40px;height: 40px;border-radius: 50%;}}
}
/style Vuex实现左侧折叠
文件目录 store/index.js
import Vue from vue
import Vuex from vuex
import tab from ./tabVue.use(Vuex)
export default new Vuex.Store({modules:{tab}
})
store/tab.js
export default {state:{isCollapse:false //控制菜单的展开还是收起},mutations:{// 修改菜单展开收起的方法collapseMenu(state){state.isCollapse!state.isCollapse}}
}
main.js
import Vue from vue
import App from ./App.vue
import VueRouter from vue-router;
import router from /router;
import ElementUI from element-ui;
import element-ui/lib/theme-chalk/index.css
import store from /store
Vue.config.productionTip false
Vue.use(VueRouter)
Vue.use(ElementUI)
new Vue({store,router,render: h h(App),
}).$mount(#app)CommonHeader.vue
templatediv classheader-containerdiv classl-contentel-button iconel-icon-menu sizemini clickhandleMenu/el-button!-- 面包屑--span classtext首页/span/divdiv classr-contentel-dropdownspan classel-dropdown-linkimg src/assets/user.webp alt/spanel-dropdown-menu slotdropdownel-dropdown-item个人中心/el-dropdown-itemel-dropdown-item退出/el-dropdown-item/el-dropdown-menu/el-dropdown/div/div/templatescript
export default {name: CommonHeader,methods:{handleMenu(){this.$store.commit(collapseMenu)}}
}
/scriptstyle scoped langless
.header-container {height: 60px;background-color: #333;display: flex;justify-content: space-between;align-items: center;padding: 0 20px;.text {color: #fff;font-size: 14px;margin-left: 10px;}.r-content{img{width: 40px;height: 40px;border-radius: 50%;}}
}
/style
CommonAside.vue
templateel-menu default-active1-4-1 classel-menu-vertical-demo openhandleOpen closehandleClose:collapseisCollapse background-color#545c64 text-color#fffactive-text-color#ffd04bh3{{isCollapse?后台:通用后台管理系统}}/h3el-menu-item clickclickMenu(item) v-foritem in noChildren :keyitem.name :indexitem.namei :classel-icon-${item.icon}/ispan slottitle{{item.label}}/span/el-menu-itemel-submenu :indexitem.label v-foritem in hasChildren :keyitem.labeltemplate slottitlei :classel-icon-${item.icon}/ispan slottitle{{item.label}}/span/templateel-menu-item-groupel-menu-item clickclickMenu(subItem) :indexsubItem.path :keysubItem.path v-forsubItem in item.children{{subItem.label}}/el-menu-item/el-menu-item-group/el-submenu/el-menu/templatestyle langless scoped
.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;
}
.el-menu{height: 100vh; //占据页面高度100%h3{color: #fff;text-align: center;line-height: 48px;font-size: 16px;font-weight: 400;}
}
/stylescript
export default {data() {return {menuData:[{path:/,name:home,label:首页,icon:s-home,url:Home/Home},{path:/mall,name:mall,label:商品管理,icon:video-play,url:MallManage/MallManage},{path:/user,name:user,label:用户管理,icon:user,url:userManage/userManage},{label:其他,icon:location,children:[{path:/page1,name:page1,label:页面1,icon:setting,url:Other/PageOne},{path:/page2,name:page2,label:页面2,icon:setting,url:Other/PageTwo},]},]};},methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);},clickMenu(item){// console.log(item)// console.log(this.$route.path)// 当页面的路由与跳转的路由不一致才允许跳转if(this.$route.path!item.path !(this.$route.path/home(item.path/))){this.$router.push(item.path)}}},mounted() {console.log(this.$route.path)},computed:{//没有子菜单的数据noChildren(){return this.menuData.filter(item!item.children)},//有子菜单数组hasChildren(){return this.menuData.filter(itemitem.children)},isCollapse(){return this.$store.state.tab.isCollapse}}
}
/script
Main.vue
templatedivel-containerel-aside widthautoCommonAside/CommonAside/el-asideel-containerel-headerCommonHeader/CommonHeader/el-headerel-main
!-- 路由出口路由匹配到的组件将渲染在这里 --router-view/router-view/el-main/el-container/el-container/div/templatescript
import CommonAside from /components/CommonAside.vue;
import CommonHeader from /components/CommonHeader.vue;
export default {name: Main,components:{CommonAside,CommonHeader}
}
/scriptstyle scoped
.el-header{padding: 0;margin: 0;
}
.el-menu{border-right: none;
}
/style
