在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 金额文本框实现代码
Feb 14 Javascript
js的Prototype属性解释及常用方法
May 08 Javascript
jQuery学习总结之jQuery事件
Jun 30 Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
js正则表达式验证密码强度【推荐】
Mar 03 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
Apr 20 Javascript
AngularJS实现进度条功能示例
Jul 05 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
Aug 14 Javascript
学习Vue组件实例
Apr 28 Javascript
Angular Renderer (渲染器)的具体使用
May 03 Javascript
vue实现公告栏文字上下滚动效果的示例代码
Jun 16 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
杏林同学录(五)
2006/10/09 PHP
php不用正则采集速度探究总结
2008/03/24 PHP
php strcmp使用说明
2010/04/22 PHP
PHP MVC框架路由学习笔记
2016/03/02 PHP
PHP使用PHPExcel实现批量上传到数据库的方法
2017/06/08 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
jQuery Easyui datagrid/treegrid 清空数据
2016/07/09 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
使用clipboard.js实现复制功能的示例代码
2017/10/16 Javascript
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
Electron整合React使用搭建开发环境的步骤详解
2020/06/07 Javascript
Element Alert警告的具体使用方法
2020/07/27 Javascript
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
Numpy 改变数组维度的几种方法小结
2018/08/02 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
python 使用递归回溯完美解决八皇后的问题
2020/02/26 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
美国知名的在线旅游服务网站:Priceline
2016/07/23 全球购物
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
迪卡侬波兰体育用品商店:Decathlon波兰
2020/03/31 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
应用化学专业本科生求职信
2013/09/29 职场文书
疾病防治方案
2014/05/31 职场文书
街道务虚会发言材料
2014/10/20 职场文书
2014年质检工作总结
2014/11/26 职场文书
2015年节能减排工作总结
2015/05/14 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
python代码实现备忘录案例讲解
2021/07/26 Python
【海涛解说】史上最给力比赛,挑战DOTA极限
2022/04/01 DOTA
golang生成并解析JSON
2022/04/14 Golang