• Vue beforeRouteEnter 用法


    遇到的问题:

    业务流程:在商品详情页面,点击【立即购买】按钮,跳转到【提交订单】页面。在【提交订单】页面返回到商品详情页时,

    只能使用 this.$router.push方法返回到商品详情页。因为商品详情页需要商品ID。用这种方式返回到商品详情页时,再从商品

    详情页点击返回按钮,还是会回到提交订单页面。这样就形成一种死循环。应该返回到上上级页面。

    解决方式

    商品详情页JS

    export default {
    props: {
    seriesId: String
    },
    data() {
    return {
    pagetype:1//表示其他页面
    }
    },
    components: {},
    beforeRouteEnter(to, from, next) {
    console.log("****************Test1****Enter**************");
    console.log('to', to);
    console.log('from', from);
    console.log('next', next);
    next(vm => {
    //因为当钩子执行前,组件实例还没被创建
    // vm 就是当前组件的实例相当于上面的 this,所以在 next 方法里你就可以把 vm 当 this 来用了。
    console.log(vm);//当前组件的实例
    if(from.name=="order")//如果页面从提交订单返回来
    {
    vm.pagetype=3;//表示提交订单页面
    }
    });
    },
    methods: {
    onClickLeft() {
    //alert(this.pagetype);
    if(this.pagetype ==3)
    {
    //alert("来自提交订单页面");
    this.$router.go(-3);
    }
    else
    {
    //alert("来自其他页面");
    this.$router.go(-1);
    }
    },
    }
    
    
    
    
    
    
    
  • 相关阅读:
    Qt中的 Size Hints 和 Size Policies
    __declspec,__cdecl,__stdcall区别和作用
    深入理解DLL文件
    TCP/IP TIME_WAIT状态原理
    Linux 网络编程 高级套接字
    OpenCV 图像处理学习笔记(一)
    C++运算符重载的规则
    WinSock异步IO模型之Select
    ASSER、VERIFY、TRACE详解
    VC++ 网络编程总结(二)
  • 原文地址:https://www.cnblogs.com/syeacfpl/p/13742998.html
Copyright © 2020-2023  润新知