在页面一开始加上一个全局的函数:
activated: function () {
this.$setgoindex()
}

  

这个函数是这样的,判断当前页面的历史记录是不是小于等于1,如果小于等于1,说明这个页面没有可以返回的上一页,如果没有可以返回的上一页,就给地址栏加上一个goindex=true的参数,这样你从这个页面在往下一个页面跳转在返回,这个参数就一直加上的
Vue.prototype.$setgoindex = function () {
if (window.history.length <= 1) {
if (location.href.indexOf('?') === -1) {
window.location.href = location.href + '?goindex=true'
} else if (location.href.indexOf('?') !== -1 && location.href.indexOf('goindex') === -1) {
window.location.href = location.href + '&goindex=true'
}
}
}

  

然后在左上角返回按钮加上这个逻辑:
if (this.$route.query.goindex === 'true') {
this.$router.push('/')
} else {
this.$router.back(-1)
}

  

这样就可以了

vue路由回退判断的更多相关文章

  1. Vue——路由回退至指定页面

    先来引出一下遇到的问题:在做一个移动端支付页面,在付款页面点击支付按钮,支付失败时跳转至支付失败提示页面:支付成功时跳转至支付成功页面.在支付成功页面下,如果用户点击手机自带的“返回”键,就又会跳转至 ...

  2. 手写vue路由

    目录 一.简易demo 二.Vue-Router传参方式 三.进阶-路由导航 一.简易demo // routes注册 import Vue from "vue"; // impo ...

  3. react router @4 和 vue路由 详解(全)

    react router @4 和 vue路由 本文大纲: 1.vue路由基础和使用 2.react-router @4用法 3.什么是包容性路由?什么是排他性路由? 4.react路由有两个重要的属 ...

  4. vue 路由缓存 路由嵌套 路由守卫 监听物理返回

    最近开发vue项目,遇到的一些问题,这里整合一下,看到一些博客已经有写相关知识,然后自己再次记录一下. 这是关于vue路由相关比较常见的问题,以后遇到相关路由的问题,会不断更新这篇博客. 需求1:从填 ...

  5. vue路由知识整理

    vue路由知识整理 对于单页应用,官方提供了vue-router进行路由跳转的处理.我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(compo ...

  6. vue进阶:vue-router(vue路由)的安装与基本使用

    vue路由安装与基本使用 vue嵌套路由 vue动态路由(路由组件传参) vue路由重定向和一些其他的路由相关 官方手册:https://router.vuejs.org/zh/ 一.vue路由安装与 ...

  7. Vue 路由(对路由页面编写做规范)

    前言 上一篇写了“Vue 路由拦截(对某些页面需要登陆才能访问)” 的博客,此篇是续上篇对路由页面模块化,可以看到之前的路由配置都写在main.js中,真正开发肯定不能都写在main.js,所以我们要 ...

  8. Vue路由Hash模式分析

    Vue路由Hash模式分析 Vue-router是Vue的核心组件,主要是作为Vue的路由管理器,Vue-router默认hash模式,即使用URL的Hash来模拟一个完整的URL,当URL改变时页面 ...

  9. Vue路由History模式分析

    Vue路由History模式分析 Vue-router是Vue的核心组件,主要是作为Vue的路由管理器,Vue-router默认hash模式,通过引入Vue-router对象模块时配置mode属性可以 ...

随机推荐

  1. Vue中使用eslint

    .eslintrc.js module.exports = { root: true, parser: 'babel-eslint', "env": { "browser ...

  2. php *-devel

    源码编译安装个php,缺少好多-devel的库. why devel? devel包至少包括头文件和链接库.如果你的要安装的源码依赖某个库,那肯定需要这两样东西. 让apache支持php 在编译ph ...

  3. CSS样式编写案例

    1.制作如图三角形效果: 步骤一:将右侧盒子设置为相对定位 步骤二:在右侧盒子里面新建个子盒子,设置宽高相等,为正方形,绝对定位 步骤三:将绝对定位的盒子用CSS3旋转属性旋转 2.制定如图的序列号 ...

  4. 如何禁用 Azure 虚拟机的日期时间同步

    问题描述 由于 Azure 虚拟机的特殊性,物理主机会实时同步虚拟机的时间和日期.当有特殊需求时,客户想要停止日期时间的同步,但是一些常见的关闭 NTP 服务等操作都会失败. 解决方案 Importa ...

  5. ubuntu 18 下配置 WebStorm 编译 sass

    ubuntu 18 下配置 WebStorm 编译 scss 标签(空格分隔): IDE 安装Ruby: sudo apt-get install ruby ruby -v ruby 2.5.1p57 ...

  6. VueJs - 世界地图(根据返回国家value值的大小来展示颜色的深浅分布)

    一.实现功能 1.画出世界各国的世界地图 2.根据返回name->国家全称.value->数量,渲染对比世界各国成功的国家,予以值域范围的高亮 3.滑入国家地图,出现tooltip框,提示 ...

  7. 移动端调试工具weinre

    前段时间在大豹公众号上看到一个关于移动端调试的工具,了解了一下,确实不错. npm install -g weinre 先全局安装,然后使用的时候通过如下命令启动 weinre --boundHost ...

  8. cJSON库源码分析

    本文采用以下协议进行授权: 自由转载-非衍生-保持署名|Creative Commons BY-NC-ND 3.0 ,转载请注明作者及出处. cJSON是一个超轻巧,携带方便,单文件,简单的可以作为A ...

  9. 分享一个settings.xml

    <?xml version="1.0" encoding="UTF-8"?> <settings> <localRepositor ...

  10. ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(三) 激动人心的时刻到啦,实现1v1聊天

    看起来挺简单,细节还是很多的,好,接上一篇,我们已经成功连接singalR服务器了,那么剩下的内容呢,就是一步一步实现聊天功能. 我们先看看缺什么东西 点击好友弹框之后,要给服务器发消息,进入组Gro ...