标签页使用

1、点击菜单项生成新的标签页
2、点击标签页项实现页面跳转
3、bug

标签页放在main中
标签页el-tabs主要属性：
（1）editableTabsValue：高亮表示被选中的标签页（通过name标识）
（2）editableTabs:标签页数组（存储所有的标签页信息），属性：name、title

<!--      标签页--><el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="selectTab"><el-tab-panev-for="(item, index) in editableTabs":key="item.name":label="item.title":name="item.name"></el-tab-pane></el-tabs>

editableTabsValue、editableTabs存放在store中

1、点击菜单项生成新的标签页

点击菜单项生成新的标签页，添加新的标签页前要判断标签页数组中是否已经包含该标签页，如果已经拥有该标签页，只需要选中该标签页。
示例：

通过点击事件addTabs将菜单项的title和name添加到标签页数组中

<el-menu-item index="/index" @click="addTabs({title:'首页',name:'/index'})"><i class="el-icon-s-home"></i><span slot="title">首页</span>
</el-menu-item>
<el-menu-item :index="item.name" :route="{path:item.path}" v-for="item in menu.children" @click="addTabs(item)"><template slot="title"><i :class="item.icon"></i><span>{{item.title}}</span></template>
</el-menu-item>

store中对应的addTabs方法,添加一个新标签项同时将其置为高亮，即选中状态。

//添加标签页addTab(state,item){//当标签页数组中没有当前标签时才添加。let index = state.editableTabs.findIndex(e => e.name===item.name)if(index===-1){state.editableTabs.push({title: item.title,name: item.name})}//将新添加标签页激活：高亮state.editableTabsValue = item.name}

因为标签页数组editableTabs是动态更新的，所以在main中要动态获取editableTabsValue 、editableTabs值。通过computed实现。
如下：

//动态监测变量值computed:{editableTabsValue: {get(){return this.$store.state.menus.editableTabsValue;},set(val){this.$store.state.menus.editableTabsValue = val;}},editableTabs:{get(){return this.$store.state.menus.editableTabs;},set(val){this.$store.state.menus.editableTabs = val;}}},

2、点击标签页项实现页面跳转

在标签页中添加绑定事件@tab-click=“selectTab”
标签页部分

<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="selectTab"><el-tab-panev-for="(item, index) in editableTabs":key="item.name":label="item.title":name="item.name">

通过路由跳转函数selectTab实现页面跳转。
前提，菜单项的name要和路由项的name相同

//点击某个标签页实现路由跳转selectTab(target){//新知识点//this.$router.push()不仅可以通过path跳转,还可以通过name跳转this.$router.push({name:target.name}).catch(err => {console.log(err)})}

router.push()参数详解

3、bug

bug1: 当刷新页面时，之前显示的标签页都消失了。
原因：vuex store中的数据会随着页面刷新恢复默认。
解决方法：将editableTabs、editableTabsValue存放在session中。
在页面刷新时将vuex里面的信息保存在sessionStorage，页面加载时读取session中的信息，并加载到store中。
在App.vue中操作

// 解决刷新页面后，页面path和页面内容不同bugcreated() {//在页面刷新时将vuex里面的信息保存在sessionStoragewindow.addEventListener("beforeunload",() => {sessionStorage.setItem("editableTabs",JSON.stringify(this.$store.state.menus.editableTabs))sessionStorage.setItem("editableTabsValue",this.$store.state.menus.editableTabsValue)})//页面加载时读取session中的信息，并加载到store中sessionStorage.getItem("editableTabsValue")&&this.$store.commit("getEditableTabsValue",sessionStorage.getItem("editableTabsValue"))sessionStorage.getItem("editableTabs")&&this.$store.commit("getEditableTabs",JSON.parse(sessionStorage.getItem("editableTabs")))},

对应store中的相关函数，getEditableTabsValue、getEditableTabs

//从session中获取editableTabsValuegetEditableTabsValue(state,editableTabsValue){state.editableTabsValue = editableTabsValue},//从session中获取editableTabsgetEditableTabs(state,editableTabs){state.editableTabs = editableTabs},

bug2: 如果直接通过url访问某个菜单项，此时store和session中都没有相关标签页信息，那么此时标签页会显示空白。所以在App.vue中增加一个监听watch

//监控//当用户通过输入url访问界面时，此时store中和session中可能都没有该页面标签页的信息，这时就要通过watch解决//原理：在我们访问对应path之前，就把path对应的title、name加入到store中watch: {$route(to,from){//当我前往的路由路径不是login时，就把该路由信息加入到标签页数组中if(to.path !== '/login'){let obj  = {title: to.meta.title,name: to.name}this.$store.commit("addTab",obj)}}}

注意：此处使用的时route。
route和router区别
bug3: 用户退出后，store的信息没有恢复默认

logout(){this.$axios.post('/logout').then(res => {//清除本地用户信息localStorage.clear()sessionStorage.clear()//清除store中token信息this.$store.commit("resetState");//清除store中的标签页信息this.$store.commit("resetEditableTabs")this.$store.commit("resetEditableTabsValue")router.push('/login')})},

标签页使用及bug解决相关推荐

visual code 在标签页打开_VSCode 不在新标签页打开文件如何解决？
预览模式(Preview mode) 刚接触 VSCode 的时候想同时打开多个文件,但在操作的时候发现每次通过 VSCode 自带的文件浏览器点开一个新文件时,这个新文件都会直接在当前标签页打开,而 ...
织梦php调用出来的是乱码,织梦标签array runphp静态生成乱码BUG解决方法
这篇文章主要为大家详细介绍了织梦标签array runphp静态生成乱码BUG解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴. 在织梦模板的开发过程中,我 ...
谷歌浏览器打开标签会把之前的覆盖掉_Chrome 浏览器新更新解决了本地文件拖入导致的标签页意外关闭问题...
原标题:Chrome 浏览器新更新解决了本地文件拖入导致的标签页意外关闭问题这个问题之前相当让人头疼(至少对小编来讲是这样). 你有没有在 Google Chrome 浏览器上使用过拖放功能,但却发 ...
Win7文件夹属性没有共享标签页的解决方法
Win7文件夹属性没有共享标签页怎么办?Win7文件夹属性里有一个文件夹属性叫共享标签页,这个共享标签页的功能是与共享文件夹中与其他电脑共享文件.有用户反映过文件夹的属性洪没有共享标签页了,解决办法就 ...
chrome 版本 29.0.1547.76 m 解决打开新标签页后的恶心页面的问题
个人非常不喜欢这个版本的新标签页的样子,特别是一再输入框中输入要搜索的东西,自动跑到标题栏中去了,比吃屎还恶心.下面是解决办法: 在地址栏输入:chrome://flags/ 按Ctrl+F,输入下面 ...
解决Vscode编辑器不能打开多标签页问题
解决Vscode编辑器不能打开多标签页问题参考文章: (1)解决Vscode编辑器不能打开多标签页问题 (2)https://www.cnblogs.com/chig/p/11288689.html ...
解决新版Chrome无法将单个标签页静音的问题
在以前版本的Chrome浏览器中,可以通过设置enable-tab-audio-muting选项将单个标签页静音. 但在新版本的Chrome浏览器中,无法再通过chrome://flags/#enab ...
解决Chrome浏览器打开新标签页，显示“无法访问此网站连接已重置”的问题【在54.0 beta版上测试通过】
1. 问题描述在浏览器中打开新标签页,无法正常进入带搜索框的新标签页,而是出现错误:无法访问此网站连接已重置. 2. 解决办法按照这篇博客的做法(http://www.cnblogs.com/c ...
（已解决）使火狐浏览器默认在新版标签页打开链接
火狐浏览器默认总是把链接在当前页面打开,覆盖了原来内容,导致找之前在看的东西很不方便... 估计由于装了最新版火狐浏览器的原因,之前好用的方法,如安装 open-link-with-new-tab,t ...

标签页使用及bug解决

标签页使用

1、点击菜单项生成新的标签页

2、点击标签页项实现页面跳转

3、bug

标签页使用及bug解决相关推荐

最新文章

热门文章