zoukankan      html  css  js  c++  java
  • 在保存数据之后,不知道什么时候清空数据,不如试试beforeRouteEnter

    一个需求是在a页面里边进行查询一个表格,查出后可以点击任意一条数据进行跳转别的页面进行操作,在操作完成以后再跳回a页面时,要呈现出跳转之前的a页面中那些查询的数据

    项目里边是直接用的本地存储,在点击跳转的时候进行存储

     // 存
    edit () { let a
    = { name:'zhang', age:'18' } sessionStorage.setItem('session', JSON.stringify(a)) }
    // 取
    created() { sessionStorage.getItem(
    'session') ...进行你想要的赋值
    //赋值结束后进行销毁
     sessionStorage.removeItem('sessionDetailWeb')
    }

    这样看着是没没有什么问题,但程序员永远不知道用户是怎么使用你的产品的,突然发现一种情况,a页面->b页面(此时已经存本地了,按理来说,用户在b页面操作完,就跳转到a页面,我正常取值,销毁,按剧本一步一步来),但是,凡事都有个但是,但是用户操作是a页面->b页面->没有操作完,通过菜单栏去了另一个页面,然而当他再次进入a页面的时候,应该是初始状态。这,,,,,

    所以就用到了beforeRouteEnter 路由守卫

    在a页面

     beforeRouteEnter(to, from, next) {
        if (
          from.name != 'edit'  && sessionStorage.getItem('session')
        ) {
          sessionStorage.removeItem('session')
        }
        next()
      }

    也就是当跳转到a页面的时候,首先判断下是不是b页面跳转的,如果不是,那就把本地的储存销毁,当然 如果公共的地方比较多,也可在router.js里边使用beforeEach来统一控制

  • 相关阅读:
    vue-cli3配置开发环境和生产环境
    vue配置开发环境和生产环境
    js实现div拖拽互换位置效果
    axios用post提交的数据格式
    面试题会被问及哪些?(总结)
    深入理解vue
    nodejs 前端项目编译时内存溢出问题的原因及解决方案
    MUI框架开发HTML5手机APP(一)--搭建第一个手机APP
    关于if省略{}时的一些问题
    函数声明的两种形式的区别
  • 原文地址:https://www.cnblogs.com/yanyanliu/p/13027007.html
Copyright © 2011-2022 走看看