在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 相关文章推荐
Prototype使用指南之base.js
Jan 10 Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 Javascript
JavaScript数据结构与算法之栈与队列
Jan 29 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
Apr 06 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
Sep 26 Javascript
JavaScript 中的 this 工作原理
Jun 20 Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 Javascript
微信小程序实现一个简单swiper代码实例
Dec 30 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
Jun 17 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
Content-type 的说明
2006/10/09 PHP
php下删除一篇文章生成的多个静态页面
2010/08/08 PHP
apache和php之间协同工作的配置经验分享
2013/04/08 PHP
8个必备的PHP功能实例代码
2013/10/27 PHP
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
关于js中for in的缺陷浅析
2013/12/02 Javascript
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
js实现带圆角的两级导航菜单效果代码
2015/08/24 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
JavaScript生成简单等差数列
2017/11/28 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
2019/09/06 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
python决策树之C4.5算法详解
2017/12/20 Python
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
python读取文件指定行内容实例讲解
2020/03/02 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
解决python 执行shell命令无法获取返回值的问题
2020/12/05 Python
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
建筑人员岗位职责
2013/12/25 职场文书
小学防溺水制度
2014/01/29 职场文书
计生专干事迹
2014/05/28 职场文书
党员目标管理责任书
2014/07/25 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
使用Python获取字典键对应值的方法
2022/04/26 Python
SQL Server 中的事务介绍
2022/05/20 SQL Server