首页 > 其他分享 >vue+element ui <el-tabs>中刷新页面不要回到初始页面

vue+element ui <el-tabs>中刷新页面不要回到初始页面

时间:2022-11-08 17:34:09浏览次数:41  
标签:activeName vue handle name sessionStorage element tab 页面

公司新加了一个需求,每个tab栏下的页面里面有查看详情的接口,查看后返回到查看前的tab页面。

vue+element ui <el-tabs>中刷新页面不要回到初始页面_当前页


刚开始每次返回都返回到待处理的页面,显然不符合需求。

思路:每次点击tab栏,将当前页面的activeName写入缓存,下次返回时,先从缓存读取数据,如果缓存中没有,就直接跳转待处理页面。

代码如下:

<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
​</el-tabs>

created () {
if (sessionStorage.getItem('handle_order_name') == null) {
this.activeName = 'submit'
} else {
this.activeName = sessionStorage.getItem('handle_order_name')
}
},
methods: {
handleClick (tab, event) {
console.log(tab, event)
sessionStorage.setItem('handle_order_name', tab.name)
}
}


标签:activeName,vue,handle,name,sessionStorage,element,tab,页面
From: https://blog.51cto.com/u_15402941/5833879

相关文章

  • Vue中实现输入框Input输入格式限制
    在开发过程中,基本都遇到过需要限制输入的情况,比如金额、仅字母数字、可输入小数位等,网上搜了很多方法也遇到一些坑,所以我把自己用的一些方法分享出来,希望对有需要的人有所帮......
  • vue slot的一点理解
    先来一个实例,方便解释:子组件:<template><div><button></button><slot>这里是默认值</slot><slotname="one">这里是默认值one</slot><slotname......
  • vue中使用Element
    官网https://element.eleme.cn/#/zh-CN/component/installation安装npm安装elementnpmielement-ui-S快速上手引入Element在main.js中写入以下内容:importVu......
  • 用命令行创建vue项目
    准备打开命令行安装 vue-cilnpminstall-g@vue/cli安装完成就可以使用 vuecreate 创建项目1.基于命令行的方式创建vue项目vuecaeatevue2.基于图形化界面的方......
  • vue export和import
    export点击查看代码//m1.js//分别暴露exportletschool="XX学校";exportfunctionteach(){ console.log("教学");}//m2.js//统一暴露letschool="......
  • vue.js3:div上添加右键菜单([email protected])
    一,js代码:<template><div><divstyle="width:800px;margin:auto;display:flex;flex-direction:column;"><div>请选择上传图片:<inputtype="......
  • elementUI table 数组中各项加逗号隔开
    js处理//this.newTableData数组this.newTableData.map((item,index)=>{//item.label数组if(item.label){......
  • Vue3+Taro+NutUI 微信小程序使用canvas组件完成电子签名功能
    使用Taro小程序开发框架中的canvas组件实现电子签名功能,实现签名时屏幕自动横屏,可清空签名重签,可保存导出图片的64位码。请将手机屏幕横向在区域内进行签名重签完......
  • antdv (Ant Design of Vue) 复杂表单验证问题解决方法
    我们知道,在简单的表单中,都是一项一项往下排列的,验证的时候也按照字段一一对把规则写好就能验证,如下图  但是遇到了复杂场景的表单验证,比如一项由多个input、checkbox......
  • VUE2 实现一个页面 调用 另一个页面的函数
    今天我在Vue 需要实现 一个这样的功能在App.vue页面中 要实现 调用 另一个页(ExtensionMonitor.vue)中的函数 并将参数 传过去下面将实现的步骤写下来,供大家参考1.......