在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中extend函数详解
Feb 13 Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
JavaScript中数组slice和splice的对比小结
Sep 22 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 Javascript
关于vue.js组件数据流的问题
Jul 26 Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 Javascript
基于JavaScript实现每日签到打卡轨迹功能
Nov 29 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
Vue拖拽组件列表实现动态页面配置功能
Jun 17 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 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批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
jQuery纵向导航菜单效果实现方法
2016/12/19 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
vue中使用props传值的方法
2019/05/08 Javascript
了解JavaScript中的选择器
2019/05/24 Javascript
layui动态绑定事件的方法
2019/09/20 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
angular共享依赖的解决方案分享
2020/10/15 Javascript
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
深入理解Python中的super()方法
2017/11/20 Python
python 循环读取txt文档 并转换成csv的方法
2018/10/26 Python
python之pyqt5通过按钮改变Label的背景颜色方法
2019/06/13 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
python实现逻辑回归的示例
2020/10/09 Python
pycharm 快速解决python代码冲突的问题
2021/01/15 Python
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
纽约市的奢华内衣目的地:Anya Lust
2019/08/02 全球购物
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
事业单位接收函
2014/01/10 职场文书
会计电算化专业自荐信
2014/03/15 职场文书
结对共建工作方案
2014/06/02 职场文书
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers