在vue中实现禁止回退上一步,路由不存历史记录

在有些情况下，我们不想往路由里添加历史记录。（vue的项目，vue-router中不想存历史记录）

根据vue官网提供的，楼主总结了一下，主要有以下几种方案：

根据官网的解释 。声明式路由和编程式路由都是添加新的记录，同时vue还提供了replace来替换路由记录，从而实现路由不存历史记录的情况，以下是楼主总结的几种方法：

1、声明式路由

2、编程式

3、原生js实现

楼主晚上回去看了一下<js高程>，原生实现替换路由，不记录历史记录的方法

window.open("http://www.baidu.com.......")；

会往路由历史中添加一条记录（还有第二个参数，大家可自几去查看，在dom第7章）

window.location.replace("http://www.baidu.com.......");

会替换之前的历史记录，不会添加历史记录

补充知识：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中实现禁止回退上一步,路由不存历史记录就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue路由拦截及页面跳转的设置方法

    路由设置:router/index.js export default new Router({ routes: [ { path: '/selfcenter', name: 'selfcenter', meta: { requireAuth: true // 配置此条,进入页面前判断是否需要登陆 }, component: selfcenter } ] }) main.js: /* eslint-disable no-new */ router.beforeEach((to, from, ne

  • 在vue中阻止浏览器后退的实例

    如下所示: history.pushState(null, null, document.URL); window.addEventListener('popstate', function() { history.pushState(null, null, document.URL); }); vue阻止浏览器后退按钮与js相同,同样没有脱离原生的js 以上这篇在vue中阻止浏览器后退的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Vue 利用指令实现禁止反复发送请求的两种方法

    前端做后台管控系统,在某些接口请求时间过长的场景下,需要防止用户反复发起请求. 假设某场景下用户点击查询按钮后,后端响应需要长时间才能返回数据.那么要规避用户返回点击查询按钮无外乎是让用户无法在合理时间内再次点击按钮.实现方式也有好几种: 1.在按钮点击发起请求后,弹个蒙层,显示个loading,等请求数据返回了将蒙层隐藏掉. 2.在按钮点击发起请求后,将按钮禁用掉,同样等数据返回了将按钮禁用解除. 以上是比较常见的2种方案. 实现上最简单的肯定是在需要的页面种在请求前和拿到数据后,单独处理.这

  • 在vue中实现禁止回退上一步,路由不存历史记录

    在有些情况下,我们不想往路由里添加历史记录.(vue的项目,vue-router中不想存历史记录) 根据vue官网提供的,楼主总结了一下,主要有以下几种方案: 根据官网的解释 .声明式路由和编程式路由都是添加新的记录,同时vue还提供了replace来替换路由记录,从而实现路由不存历史记录的情况,以下是楼主总结的几种方法: 1.声明式路由 2.编程式 3.原生js实现 楼主晚上回去看了一下<js高程>,原生实现替换路由,不记录历史记录的方法 window.open("http://w

  • 在vue中实现禁止屏幕滚动,禁止屏幕滑动

    今天写了一个Vue弹层组件,用来全屏查看图片的,大概是下面这么一个效果: 其中背景是透明色的,但是弹出这个组件时手指滑动.鼠标滚轮滑动,底部页面是会动. 作为自己开发的一个常用的组件,这种bug当然是要解决的. 于是学艺不精的我在网上找了蛮久的,看了不少博客,看了不少观点和方法.终于找到了一个最简单.最实在的方法, 代码如下: <div class="magnify" v-show="isShow" @click.self="hide" @

  • vue中使用axios post上传头像/图片并实时显示到页面的方法

    在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法. html代码: <div id="myPhoto" v-show="personalPhoto"> <div class="viewPhoto"> <img src="" alt="" id="portrait"style=&q

  • vue中element-ui使用axios上传文件

    vue中element-ui使用axios上传文件

    本文实例为大家分享了vue中element-ui使用axios上传文件的具体代码,供大家参考,具体内容如下 环境:vue2.5.6+axios0.18.1+element-ui2.15.1 在使用element UI的upload组件上传文件时,遇到一些问题,网上的说法不尽如是,在此记录 其实最主要的估计就是axios相关的问题,因我们平时开发的vue项目都是封装过axios后进行api的调用,但上传操作跟一般的api请求不同,所有总是报错,故需要建立新的axios实例. 文件上传类型可以在el

  • vue中el-autocomplete支持分页上拉加载功能

    目录 el-autocomplete使用 template 实现需求分析 1. 输入框为空时聚焦或失焦后又重新聚焦不会触发请求数据接口 2. 缓存上一次已查询的数据&搜索条件:blurArr.blurTxt 3.滚动加载指令(监听容器的scroll事件并进行防抖处理) 4. 分页加载 4.0 获取数据,并进行格式化 4.1 关闭加载圈 4.2 分页加载事件 4.3 清空输入框,重置上次记录的数据 4.4 选中时记录相关数据 数据展示不稳定问题 完整的 scss 文件 完整的 js 文件 总结 e

  • vue中div禁止点击事件的实现

    vue中div禁止点击事件的实现

    目录 div禁止点击事件 div作为按钮不可点击问题的处理 div禁止点击事件 在props里面定义一个判断是不是只读的属性. 在最外面的div里面添加三元表达式 pointer-events: none;是禁止鼠标点击事件 div作为按钮不可点击问题的处理 vue中div作为按钮,使用:disabled="flag"(flag为布尔类型)控制按钮是否可点击,发现无论flag为true还是false,div按钮都可点击. 解决方法,将div换成button. 以上为个人经验,希望能给大

  • Vue如何实现iframe的上一步、下一步操作

    Vue如何实现iframe的上一步、下一步操作

    目录 iframe的上一步.下一步操作 背景 实现 Vue使用iframe踩坑 需求 BUG 解决方案 心得 iframe的上一步.下一步操作 背景 使用Element的Tabs组件嵌入多页面,但是页面中需要实现上一步.下一步功能,如图: 实现 //父组件         var vm = new Vue({              el: "#app",              data: {                  pages: [],               

  • vue中如何禁止input框和textarea编辑

    目录 如何禁止input框和textarea编辑 第一种方法 第二种方法 说说input无法输入原因 如何禁止input框和textarea编辑 在我们开发项目的时候,有时候我们不希望用户对我们的页面进行操作,尤其是输入框之类的,这时候我们需要设置一下 第一种方法 <input type="text" v-model="ConList.title" style="width: 100%;outline: none;height: 100%"

  • Vue中建立全局引用或者全局命令的方法

    Vue中建立全局引用或者全局命令的方法

    如何在Vue中建立全局引用或者全局命令,具体内容如下 1 一般在vue中,有很多vue组件,这些组件每个都是一个文件.都可能需要引用到相同模块(或者插件).我们不想每个文件都import 一次模块. 如果是基于vue.js编写的插件我们可以用 Vue.use(...) main.js 2 但是如果想添加一个全局命令,同时又让每个vue的文件都能用到怎么办? 第一步:最好建立一个全局的命令文件例如:directive/directive.js 第二步:利用Vue.directive()建立一个全局

  • Vue+Node实现大文件上传和断点续传

    Vue+Node实现大文件上传和断点续传

    目录 源代码 Blob.slice 切片 初始化文件内容 FormData.append() 大文件上传 断点续传 代码 创建切片 源码 worker 线程通讯的逻辑 断点续传 秒传 源代码 断点续传.分片上传.秒传.重试机制 文件上传是开发中的难点, 大文件上传及断点续传 难点中的细节及核心技术点. element-ui 框架的上传组件,是默认基于文件流的. 数据格式:form-data: 传递的数据: file 文件流信息:filename 文件名字 通过 fileRead.readAsDa

随机推荐