在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 setTimeout 常见问题小结
Aug 13 Javascript
解析jquery中的ajax缓存问题
Dec 19 Javascript
input禁止键盘及中文输入,但可以点击
Feb 13 Javascript
javascript实现图片自动和可控的轮播切换特效
Apr 13 Javascript
用js编写的简单的计算器代码程序
Aug 04 Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 Javascript
JavaScript实现解析INI文件内容的方法
Nov 17 Javascript
JS滚动到指定位置导航栏固定顶部
Jul 03 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
vue实现同时设置多个倒计时
May 20 Vue.js
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
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
动态样式类封装JS代码
2009/09/02 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
JS动态获取当前时间,并写到特定的区域
2013/05/03 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
2014/10/16 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
2018/12/23 Javascript
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
2019/10/24 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
2019/12/04 Javascript
linux服务器快速卸载安装node环境(简单上手)
2021/02/22 Javascript
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
python list使用示例 list中找连续的数字
2014/01/27 Python
python如何实现内容写在图片上
2018/03/23 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
python单例设计模式实现解析
2020/01/07 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
Python基于staticmethod装饰器标示静态方法
2020/10/17 Python
Skyscanner阿联酋:全球领先的旅游搜索平台
2017/11/25 全球购物
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
小学教师个人先进事迹材料
2014/05/17 职场文书
节约用电标语
2014/06/17 职场文书
奥巴马经典演讲稿
2014/09/13 职场文书
升职自荐信怎么写
2015/03/05 职场文书
整改通知书
2015/04/20 职场文书
开除员工通知
2015/04/22 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle
Oracle锁表解决方法的详细记录
2022/06/05 Oracle