在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 相关文章推荐
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
Nov 21 Javascript
加随机数引入脚本不让浏览器读取缓存
Sep 04 Javascript
Yii2使用Bootbox插件实现自定义弹窗
Apr 02 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 Javascript
无缝滚动的简单实现代码(推荐)
Jun 07 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 Javascript
vue.js在标签属性中插入变量参数的方法
Mar 06 Javascript
在vue中使用css modules替代scroped的方法
Mar 10 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 Javascript
解决vue的router组件component在import时不能使用变量问题
Jul 26 Javascript
如何理解Vue前后端数据交互与显示
May 10 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
PHP模拟SQL Server的两个日期处理函数
2006/10/09 PHP
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
ThinkPHP 5 AJAX跨域请求头设置实现过程解析
2020/10/28 PHP
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
jquery乱码与contentType属性设置问题解决方案
2013/01/07 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
2013/09/16 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
微信小程序中顶部导航栏的实现代码
2017/03/30 Javascript
详解react-router如何实现按需加载
2017/06/15 Javascript
vue中使用ueditor富文本编辑器
2018/02/08 Javascript
jQuery插件实现的日历功能示例【附源码下载】
2018/09/07 jQuery
11个教程中不常被提及的JavaScript小技巧(推荐)
2019/04/17 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
[01:21]DOTA2周边文化主题展 神秘商店火热开售
2017/07/30 DOTA
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
python实现基本进制转换的方法
2015/07/11 Python
使用python编写监听端
2018/04/12 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
Python实现的堆排序算法示例
2018/04/29 Python
python实现小球弹跳效果
2019/05/10 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
pycharm通过ssh连接远程服务器教程
2020/02/12 Python
如何在django中运行scrapy框架
2020/04/22 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
学雷锋演讲稿汇总
2014/05/10 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
建设办主任四风问题整改思路和措施
2014/09/20 职场文书
光棍节联谊晚会活动策划书
2014/10/10 职场文书
英文版辞职信
2015/02/28 职场文书
2016年师德学习心得体会
2016/01/12 职场文书
部分武汉产收音机展览
2022/04/07 无线电
Ruby使用Mysql2连接操作MySQL
2022/04/19 Ruby
关于Redis的主从复制及哨兵问题
2022/06/16 Redis