在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 相关文章推荐
制作高质量的JQuery Plugin 插件的方法
Apr 20 Javascript
js href的用法
May 13 Javascript
$.ajax返回的JSON无法执行success的解决方法
Sep 09 Javascript
jQuery获得内容和属性方法及示例
Dec 02 Javascript
js检测输入内容全为空格的方法
May 03 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
JavaScript中使用Math.floor()方法对数字取整
Jun 15 Javascript
TypeScript 学习笔记之基本类型
Jun 19 Javascript
基于JavaScript实现仿京东图片轮播效果
Nov 06 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
Dec 27 Javascript
JS动态显示倒计时效果
Dec 12 Javascript
JavaScript监听触摸事件代码实例
Dec 30 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中的cookie
2006/11/26 PHP
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
Javascript 不能释放内存.
2006/09/07 Javascript
Javascript开发包大全整理
2006/12/22 Javascript
Add Formatted Text to a Word Document
2007/06/15 Javascript
javascript instanceof 内部机制探析
2010/10/15 Javascript
js内存泄露的几种情况详细探讨
2013/05/31 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
js 3秒后跳转页面的实现代码
2014/03/10 Javascript
js 与 php 通过json数据进行通讯示例
2014/03/26 Javascript
Bootstrap 源代码分析(未完待续)
2016/08/17 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
几行js代码实现自适应
2017/02/24 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
JS请求servlet功能示例
2017/06/01 Javascript
Popup弹出框添加数据实现方法
2017/10/27 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
vue2.0 根据状态值进行样式的改变展示方法
2018/03/13 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
原生js实现抽奖小游戏
2019/06/27 Javascript
Python 字符串中的字符倒转
2008/09/06 Python
如何搜索查找并解决Django相关的问题
2014/06/30 Python
Python检测网站链接是否已存在
2016/04/07 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
Python 解析pymysql模块操作数据库的方法
2020/02/18 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
大四学生毕业自荐信
2013/11/07 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
西游降魔篇观后感
2015/06/15 职场文书
解决MultipartFile.transferTo(dest) 报FileNotFoundExcep的问题
2021/07/01 Java/Android
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python