Vue路由判断前进后退

梦里梦外; 2021-11-05 07:52 1101阅读 0赞

判断方式应该有很多，但是我感觉最简单的方式，也是我项目中采用的方式：

定义全局跳转和返回函数，直接“接管”Vue路由的前进和后退事件：

//注册全局方法
    
    Vue.prototype.push = (url: string, closeTransition: boolean = false) => {
        //前进
        Vue.prototype.transitionName = "slide-left";
        this.$router.push(url);
    };
    
    Vue.prototype.pop = (n: number = -1, closeTransition: boolean = false) => {
        //后退
        Vue.prototype.transitionName = "slide-right";
    
        let path = this.$router.currentRoute.path;
        if (path == "/") {
            return;
        }
        this.$router.go(n);
    };

判断前进后退主要是为了移动端跳转页面时加切换动效。

页面中调用：

this.push("home");
    
    this.pop();

20191017

之前对Vue.prototype好像有点误解。

引用网上的文章和大神的回复：

[https://segmentfault.com/q/1010000009992656][https_segmentfault.com_q_1010000009992656]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM3Mjc4MDU_size_16_color_FFFFFF_t_70][]

![20191017101741779.png][]

[https_segmentfault.com_q_1010000009992656]: https://segmentfault.com/q/1010000009992656
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM3Mjc4MDU_size_16_color_FFFFFF_t_70]: /images/20211104/5f5c28f1f03549dbbece9a023654b648.png
[20191017101741779.png]: /images/20211104/9919a07d11f34746a6903b419450e171.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1101人围观）

还没有评论，来说两句吧...

相关阅读

相关 pycharm前进、后退快捷键

[https://blog.csdn.net/jamieblue1/article/details/89087064][https_blog.csdn.net_jamiebl

悠悠/ 2022年12月25日 00:49/ 0 赞/ 170 阅读

相关 vuejs同一个路由下面、切换标签。实现缓存前进后退功能

已解决：经大神的提点。没有使用keepalive。原因是要改动的地方比较多。主要是我也不太懂。然后我用了2种方法可以解决问题：第一种：改变路由（推荐）![25

向右看齐/ 2022年12月05日 10:07/ 0 赞/ 147 阅读

相关路由守卫-vue切换路由登录判断、条件判断

在vue项目中，切换路由时肯定会碰到需要登录的路由，其原理就是在切换路径之前进行判断，你不可能进入页面再去判断有无登录重新定向到login，那样的话会导致页面已经渲染以及它的各

清疚/ 2022年05月17日 07:53/ 0 赞/ 307 阅读

相关 VUE登录路由判断

VUE登录路由判断我们在做无论是网站，还是电商的时候，登录

骑猪看日落/ 2022年05月16日 05:50/ 0 赞/ 222 阅读

相关 js前进后退后代码

Js中的前进后退代码跟浏览器的很像浏览器前进代码使用window.history();=history.go(1); 然而js使用的history.forward();=hi

逃离我推掉我的手/ 2022年04月15日 03:46/ 0 赞/ 347 阅读

相关 vue路由前进刷新后退不刷新

可以参考下面两个博客 [https://blog.csdn.net/qq\_37200686/article/details/83781398][https_blog.

客官°小女子只卖身不卖艺/ 2022年03月31日 04:56/ 0 赞/ 313 阅读

相关 vue路由切换动画，前进左滑，后退右滑

一、目标实现原生app页面切换动画。前进左滑后退右滑，同级tab切换无动画二、分析 1、如何判断页面是前进还是后退？ 2、如何在前进后退时使用不同的动画？

淡淡的烟草味﹌/ 2022年03月28日 13:42/ 0 赞/ 791 阅读

相关 JS-禁用浏览器前进后退

使用jQuery： <script type="text/javascript" language="javascript"> 　　$(document).r

Dear 丶/ 2021年12月12日 02:19/ 0 赞/ 352 阅读

相关 Vue路由判断前进后退

判断方式应该有很多，但是我感觉最简单的方式，也是我项目中采用的方式：定义全局跳转和返回函数，直接“接管”Vue路由的前进和后退事件： //注册全局方法

梦里梦外;/ 2021年11月05日 07:52/ 0 赞/ 1102 阅读

相关简单实现网页前进后退

前进 <input type="button" value="前进" οnclick="javascript:history.go(1);"> 后退

骑猪看日落/ 2021年11月02日 01:08/ 0 赞/ 379 阅读