在vue中实现禁止回退上一步,路由不存历史记录


Posted in Javascript onJuly 22, 2020

在有些情况下,我们不想往路由里添加历史记录。(vue的项目,vue-router中不想存历史记录)

根据vue官网提供的,楼主总结了一下,主要有以下几种方案:

在vue中实现禁止回退上一步,路由不存历史记录

根据官网的解释 。声明式路由和编程式路由都是添加新的记录,同时vue还提供了replace来替换路由记录,从而实现路由不存历史记录的情况,以下是楼主总结的几种方法:

1、声明式路由

在vue中实现禁止回退上一步,路由不存历史记录

2、编程式

在vue中实现禁止回退上一步,路由不存历史记录

3、原生js实现

楼主晚上回去看了一下<js高程>,原生实现替换路由,不记录历史记录的方法

window.open("http://www.baidu.com.......");

会往路由历史中添加一条记录(还有第二个参数,大家可自几去查看,在dom第7章)

window.location.replace("http://www.baidu.com.......");

会替换之前的历史记录,不会添加历史记录

在vue中实现禁止回退上一步,路由不存历史记录

补充知识:vue 回退 不刷新 缓存问题 从A页跳到B页,缓存A页,当B再次返回A时,页面不刷新

我就废话不多说了,大家还是直接看代码吧~

//在index.js中
    {
    path: '/SearchContent',
    name: 'SearchContent',
    component: SearchContent,
    meta: {
     keepAlive: false,//此组件不需要被缓存
     isBack:false 
    }
   },
   {
    path: '/Shop',
    name: 'Shop',
    component: Shop,
    meta: {
     keepAlive: false, 
     isBack:false//判断上一个页面
    }
   },
 
//在searchContent中
beforeRouteEnter(to, from, next) {
     // 设置下一个路由的 meta
     if(from.name == 'Shop'){
       to.meta.isBack = true;
       to.meta.keepAlive = true;
     } // 让 A 缓存,即不刷新
    next();
  },
  components:{
    "app-brands":Brand
  },
//注意activated只能在keep-alive组件中调用
   activated() {
 if(!this.$route.meta.isBack){
  
  // 如果isBack是false,表明需要获取新数据,否则就不再请求,直接使用缓存的数据
  this.getData();
  this.getTree();
 }
 // 恢复成默认的false,避免isBack一直是true,导致下次无法获取数据
 this.$route.meta.isBack=false
 
},
//在进入页面时调用接口请求数据,当数据请求完成,第二次进入页面时,就会执行activated函数
 mounted(){
    this.getData()
    this.getTree()
  },

以上这篇在vue中实现禁止回退上一步,路由不存历史记录就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
Apr 28 Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 Javascript
SeaJS 与 RequireJS 的差异对比
Dec 08 Javascript
javascript实现tab切换特效
Nov 12 Javascript
JavaScript中的时间处理小结
Feb 24 Javascript
Javascript的表单验证-提交表单
Mar 18 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
Jun 20 Javascript
js读取本地文件的实例
Dec 22 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 Javascript
微信小程序网络请求封装示例
Jul 24 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
Dec 13 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
vue项目中使用多选框的实例代码
Jul 22 #Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 #Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 #Javascript
js实现查询商品案例
Jul 22 #Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 #Javascript
eslint+prettier统一代码风格的实现方法
Jul 22 #Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 #Javascript
You might like
PHP脚本的10个技巧(8)
2006/10/09 PHP
PHP MemCached 高级缓存应用代码
2010/08/05 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
javascript取消文本选定的实现代码
2010/11/14 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
提交表单时执行func方法实现代码
2013/03/17 Javascript
Javascript 按位取反运算符 (~)
2014/02/04 Javascript
jQuery实现按键盘方向键翻页特效
2015/03/18 Javascript
javascript实现删除前弹出确认框
2015/06/04 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
2015/08/06 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
js+canvas绘制五角星的方法
2016/01/28 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
详解Javascript获取缓存和清除缓存API
2017/05/25 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
NodeJS父进程与子进程资源共享原理与实现方法
2018/03/16 NodeJs
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
使用python实现strcmp函数功能示例
2014/03/25 Python
Python常用的日期时间处理方法示例
2015/02/08 Python
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
浅析python的Lambda表达式
2019/02/27 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
大学毕业自我鉴定范文
2014/02/03 职场文书
黄继光的英雄事迹材料
2014/02/13 职场文书
三年级学生评语
2014/04/23 职场文书
《明天,我们毕业》教学反思
2014/04/24 职场文书
广播体操口号
2014/06/18 职场文书
竞选班干部演讲稿300字
2014/08/20 职场文书
党员十八大心得体会
2014/09/12 职场文书
银行党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
2016中秋节问候语
2015/11/11 职场文书