三好街做网站的,织梦 图片网站源码,呼市浩特网站建设外包公司,组织建设一百年全文创建标签页 一、创建标签页二、点击菜单展示新标签页1、将标签数据作为全局使用2、菜单点击增加标签页3、处理重复标签4、关闭标签页 三、点击标签页操作问题1#xff1a;点击标签页选中菜单进行高亮展示问题2#xff1a;点击标签页路由也要跳转 四、解决bug 先展示最终效果 … 创建标签页 一、创建标签页二、点击菜单展示新标签页1、将标签数据作为全局使用2、菜单点击增加标签页3、处理重复标签4、关闭标签页 三、点击标签页操作问题1点击标签页选中菜单进行高亮展示问题2点击标签页路由也要跳转 四、解决bug 先展示最终效果
一、创建标签页
创建一个Tabs/index.vue页面
templatedivel-tabs v-modeleditableTabsValue typecard closableel-tab-pane:keyitem.namev-foritem in editableTabs:labelitem.title:nameitem.name/el-tab-pane/el-tabs/div
/templatescript
export default {name: Tabss,data() {return {editableTabsValue: 1,editableTabs: [{title: 首页,name: 1,content: 首页,},{title: Tab 1,name: 2,content: Tab 1 content,},{title: Tab 2,name: 3,content: Tab 2 content,},],tabIndex: 1,};},
};
/scriptstyle scoped
div{height: auto;
}
/style修改Index.vue页面在页面的路由锚点 router-view上方引入此页面 页面效果
二、点击菜单展示新标签页
1、将标签数据作为全局使用
1将数据放到store.js中作为全局
import Vue from vue
import Vuex from vuex
import moduleA from ./module/moduleA.js;
import moduleB from ./module/moduleB.js;Vue.use(Vuex)const state {username: 牛牛,userState: 0,menu_data: [],isLoadRoute: false,editableTabsValue: 1,editableTabs: [{title: 首页,name: 首页,content: 首页},{title: Tab 1,name: 2,content: Tab 1 content},{title: Tab 2,name: 3,content: Tab 2 content}]
}
const mutations {setLoadRoute(state, data) {state.isLoadRoute data},setUser(state, name) {state.username name},setUserState(state, data) {state.userState data},setMenuData(state, data) {state.menu_data data},}
const getters {getUserState(state) {let data;if (state.userState 0) {data 无效} else {data state.userState 级}return data;}
}
const modules {a: moduleA,b: moduleB
}export default new Vuex.Store({state,mutations,getters,modules
})2Tabs/index.vue 中的这两个数据 editableTabsValue 和 editableTabs 就从store中获取 注意 如果你的在data中这样写可能会无法正常显示建议用computed 方式来写。 templatedivel-tabs v-modeleditableTabsValue typecard closableel-tab-pane:keyitem.namev-foritem in editableTabs:labelitem.title:nameitem.name/el-tab-pane/el-tabs/div
/templatescript
export default {name: Tabs,data() {return {};},computed: {editableTabsValue: {get() {return this.$store.state.editableTabsValue;},set(val) {this.$store.state.editableTabsValue val;},},editableTabs: {get() {return this.$store.state.editableTabs;},set(val) {this.$store.state.editableTabs val;},},},
};
/scriptstyle scoped
div {height: auto;
}
/style页面效果是一样的
2、菜单点击增加标签页
1在 store/index.js 中将写死的数据editableTabs 内容删除只剩下首页的那条 2在mutations添加 editableTabs 数据变更的方法 addEditableTabs因为我定义的菜单数据的时候没有title属性所以这里我都用title来代表
参考代码
import Vue from vue
import Vuex from vuex
import moduleA from ./module/moduleA.js;
import moduleB from ./module/moduleB.js;Vue.use(Vuex)const state {username: 牛牛,userState: 0,menu_data: [],isLoadRoute: false,editableTabsValue: 1,editableTabs: [{title: 首页,name: 首页,content: 首页}]
}
const mutations {setLoadRoute(state, data) {state.isLoadRoute data},setUser(state, name) {state.username name},setUserState(state, data) {state.userState data},setMenuData(state, data) {state.menu_data data},addEditableTabs(state, tab) {state.editableTabs.push({title: tab.name,name: tab.name})state.editableTabsValue tab.name}
}
const getters {getUserState(state) {let data;if (state.userState 0) {data 无效} else {data state.userState 级}return data;}
}
const modules {a: moduleA,b: moduleB
}export default new Vuex.Store({state,mutations,getters,modules
})3给Aside/index.vue菜单增加点事件selectMenu方法
templatediv styleheight: 100%el-menubackground-color#545c64text-color#ffffffactive-text-color#ffd04bclassel-menu-vertical-demorouterel-menu-item:indexitem.pathv-foritem in menu_data:keyitem.nameclickselectMenu(item)i :classitem.icon/i{{ item.name }}/el-menu-item/el-menu/div
/templatescript
export default {name: Aside,data() {return {};},computed: {menu_data: {get() {return this.$store.state.menu_data;},},},methods: {selectMenu(item) {this.$store.commit(addEditableTabs, item);},},
};
/scriptstyle scoped
.el-icon-location,
.el-icon-document,
.el-icon-setting {display: inline-flex;align-items: center;justify-content: center;
}
/style页面效果 问题出现重复菜单名称标签
3、处理重复标签
在store/index.js文件中的addEditableTabs 中判断如果数据中已经有了则不重复添加只需切换即可
页面效果 现在就只有两个标签了目前展示正常但是没法关闭
4、关闭标签页
标签页添加关闭事件 在el-tabs标签中添加 tab-removeremoveTab在method添加对应的方法 templatedivel-tabsv-modeleditableTabsValuetypecardclosabletab-removeremoveTabel-tab-pane:keyitem.namev-foritem in editableTabs:labelitem.title:nameitem.name/el-tab-pane/el-tabs/div
/templatescript
export default {name: Tabs,data() {return {};},methods: {removeTab(targetName) {let tabs this.editableTabs;let activeName this.editableTabsValue;if (activeName targetName) {tabs.forEach((tab, index) {if (tab.name targetName) {let nextTab tabs[index 1] || tabs[index - 1];if (nextTab) {activeName nextTab.name;}}});}this.editableTabsValue activeName;this.editableTabs tabs.filter((tab) tab.name ! targetName);},},computed: {editableTabsValue: {get() {return this.$store.state.editableTabsValue;},set(val) {this.$store.state.editableTabsValue val;},},editableTabs: {get() {return this.$store.state.editableTabs;},set(val) {this.$store.state.editableTabs val;},},},
};
/scriptstyle scoped
div {height: auto;
}
/style页面效果 问题 选中菜单侧边栏没有进行对应的高亮展示关闭了“一级菜单2”但是页面内容还停留在“一级菜单2”其实就是路由没有变 三、点击标签页操作
问题1点击标签页选中菜单进行高亮展示
在Aside/index.vue中给 el-menu 设置属性 default-active
:default-activethis.$store.state.editableTabsValue将原来代码el-menu-item的index设置为item.name
:indexitem.name加入路由跳转代码
因原来菜单点击会根据index属性来跳转index原来是path路由地址现在index属性更改为name了则跳转不会生效修改原来的router.js的代码动态创建路由加入name属性name:item.name方便跳转。
修改router/index.js 代码
let oRouters router.options.routes;
const buildRouter (){let data store.state.menu_data;data.forEach(item{let new_router {path:item.path,name:item.name,component:() import(./components/item.component.vue)}oRouters[0].children.push(new_router);})router.addRoutes(oRouters)
}在Aside/index.vue的 selectMenu方法中加入路由跳转代码根据name跳转仅需一行代码即可。
selectMenu(item){//点击菜单跳转路由this.$router.push({name:item.name})this.$store.commit(addEditableTabs,item);
}页面效果可以实现点击标签页菜单跟着高亮显示了 Aside/index.vue 页面代码
templatediv styleheight: 100%el-menubackground-color#545c64text-color#ffffffactive-text-color#ffd04bclassel-menu-vertical-demorouter:default-activethis.$store.state.editableTabsValueel-menu-item:indexitem.namev-foritem in menu_data:keyitem.nameclickselectMenu(item)i :classitem.icon/i{{ item.name }}/el-menu-item/el-menu/div
/templatescript
export default {name: Aside,data() {return {};},computed: {menu_data: {get() {return this.$store.state.menu_data;},},},methods: {selectMenu(item) {//点击菜单跳转路由this.$router.push({ name: item.name });this.$store.commit(addEditableTabs, item);},},
};
/scriptstyle scoped
.el-icon-location,
.el-icon-document,
.el-icon-setting {display: inline-flex;align-items: center;justify-content: center;
}
/style问题2点击标签页路由也要跳转
上面遗留的问题2点击标签页标签页下方的页面没有跟着跳转下面修改这个问题
在Tabs页面的 el-tabs 添加 tab-click 事件添加方法利用路由的name来跳转
templatedivel-tabsv-modeleditableTabsValuetypecardclosabletab-removeremoveTabtab-clickclickTabel-tab-pane:keyitem.namev-foritem in editableTabs:labelitem.title:nameitem.name/el-tab-pane/el-tabs/div
/templatescript
export default {name: Tabs,data() {return {};},methods: {removeTab(targetName) {let tabs this.editableTabs;let activeName this.editableTabsValue;if (activeName targetName) {tabs.forEach((tab, index) {if (tab.name targetName) {let nextTab tabs[index 1] || tabs[index - 1];if (nextTab) {activeName nextTab.name;}}});}this.editableTabsValue activeName;this.editableTabs tabs.filter((tab) tab.name ! targetName);},clickTab(target) {this.$router.push({ name: target.name });},},computed: {editableTabsValue: {get() {return this.$store.state.editableTabsValue;},set(val) {this.$store.state.editableTabsValue val;},},editableTabs: {get() {return this.$store.state.editableTabs;},set(val) {this.$store.state.editableTabs val;},},},
};
/scriptstyle scoped
div {height: auto;
}
/style效果展示
四、解决bug
关闭菜单后菜单对应的路由没有跟着跳转 仅需在关闭标签的方法removeTab最后加上以下代码
this.$router.push({name:activeName})首页不允许关闭 在关闭标签的方法removeTab 执行关闭之前加入以下代码
if(targetName首页){return ;
}完整removeTab 代码
removeTab(targetName) {let tabs this.editableTabs;let activeName this.editableTabsValue;if(targetName首页){return ;}if (activeName targetName) {tabs.forEach((tab, index) {if (tab.name targetName) {let nextTab tabs[index 1] || tabs[index - 1];if (nextTab) {activeName nextTab.name;}}});}this.editableTabsValue activeName;this.editableTabs tabs.filter(tab tab.name ! targetName);this.$router.push({name:activeName})
}还有一个潜藏的bug就是打开、关闭的顺序问题先关闭前面的菜单会报错后面解决
报错代码如下
Uncaught runtime errors:Avoided redundant navigation to current location: /index/menu2.NavigationDuplicated: Avoided redundant navigation to current location: /index/menu2.at createRouterError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1720:15)at createNavigationDuplicatedError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1708:15)at HTML5History.confirmTransition (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1946:18)at HTML5History.transitionTo (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1887:8)at HTML5History.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2165:10)at eval (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2510:22)at new Promise (anonymous)at VueRouter.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2509:12)at VueComponent.removeTab (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Tabs/index.vue?vuetypescriptlangjs:29:20)at invokeWithErrorHandling (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2903:26)
