当前位置: 首页 > news >正文

Vue中 beforeRouteLeave离开路由之前要执行的操作

实例
一般在我们各自页面的首选页面进行操作。
首先我们要知道beforeRouteLeave(to, from , next)三个参数的意义
to , 离开之前
from , 到达
next,下一步。

beforeRouteLeave(to, from, next) { // 离开路由之前 ,判断一下是不是跳到下一个页面 // 是否保存当前页面
    // console.log(to.path, '查看路径,跳转的路径')
    const path = '/intelligent-water/waterOrigin/configuration'  // 路由配置里面的路由路径经
    // 判断两个路径是否一致
    if (to.path === path) { // 如果完全匹配跳转页面,
      if (to.path.indexOf('waterRefineView') !== -1) { // 如果存在有某个关键字,自己定义
        // 就可以进行本地存储
        localStorage.setItem('navFormInfo', JSON.stringify(this.navFormInfo.data))
        this.HandletableShow() // 要展示的tab表格
        next() // 下一步
      } else {
        next() // 下一步
      }
    } else {  // 如果跳转到其他模块的页面就清除缓存
      if (to.path.indexOf('/waterRefine') === -1) {
      // 清除已经缓存的数据
        localStorage.removeItem('navFormInfo')
        localStorage.removeItem('HandletableShow')
      }
      next() // 下一步
    }
  },

相关文章:

  • AF3.1.0简单二次封装
  • Vue 项目中 根目录中router路由拦截 beforeEach 常用的写法
  • 不同按钮模板自定义
  • react项目中没有路由守卫,需要拦截的话,只能在路径上拦截,可以自己去封装 Route
  • 跟锦数学160823-190322, 共 942 题
  • JavaScript新鲜事·第5期
  • vue 项目实战 递归
  • react 项目 tab列表 把返回的一个字段数组,全部 展示在一个字段里
  • Python语言学习 (六)1.2
  • js语法中 ?. 和 ?? 的含义以及用法说明
  • 工作中MySql常用操作
  • 命令模式-对象行为型
  • git 分支 合并 具体执行过程 详细
  • 2017届校招提前批面试回顾
  • 前端 通过id 查询详情,让form表单中某地址展示成超链接,点击跳转并查看情况
  • express + mock 让前后台并行开发
  • iOS动画编程-View动画[ 1 ] 基础View动画
  • macOS 中 shell 创建文件夹及文件并 VS Code 打开
  • React-Native - 收藏集 - 掘金
  • STAR法则
  • Vue UI框架库开发介绍
  • WePY 在小程序性能调优上做出的探究
  • 关于 Linux 进程的 UID、EUID、GID 和 EGID
  • 警报:线上事故之CountDownLatch的威力
  • 离散点最小(凸)包围边界查找
  • 通过几道题目学习二叉搜索树
  • 详解NodeJs流之一
  • Spring Batch JSON 支持
  • ​​​​​​​Installing ROS on the Raspberry Pi
  • ​queue --- 一个同步的队列类​
  • ​RecSys 2022 | 面向人岗匹配的双向选择偏好建模
  • ​ssh-keyscan命令--Linux命令应用大词典729个命令解读
  • (javascript)再说document.body.scrollTop的使用问题
  • (免费领源码)python#django#mysql公交线路查询系统85021- 计算机毕业设计项目选题推荐
  • (入门自用)--C++--抽象类--多态原理--虚表--1020
  • (四)c52学习之旅-流水LED灯
  • (原创)boost.property_tree解析xml的帮助类以及中文解析问题的解决
  • (转) Android中ViewStub组件使用
  • (轉)JSON.stringify 语法实例讲解
  • .bashrc在哪里,alias妙用
  • .NET MVC 验证码
  • .NET/C# 使用 SpanT 为字符串处理提升性能
  • .NET企业级应用架构设计系列之结尾篇
  • .net中我喜欢的两种验证码
  • @serverendpoint注解_SpringBoot 使用WebSocket打造在线聊天室(基于注解)
  • [ vulhub漏洞复现篇 ] struts2远程代码执行漏洞 S2-005 (CVE-2010-1870)
  • [ 蓝桥杯Web真题 ]-布局切换
  • [ACTF2020 新生赛]Upload 1
  • [Android]通过PhoneLookup读取所有电话号码
  • [AndroidStudio]_[初级]_[修改虚拟设备镜像文件的存放位置]
  • [ASP.NET 控件实作 Day7] 设定工具箱的控件图标
  • [BROADCASTING]tensor的扩散机制
  • [C++]指针与结构体
  • [GN] DP学习笔记板子
  • [javascript]Tab menu实现