Vue 页面带参异步请求跳转

Vue 页面带参异步请求跳转

文章部分参考自：vue组件独享守卫钩子函数参数详解（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave）

情景：在下拉框中实现异步跳转 两个子路由 三个复用 四个下拉框按钮

1.两个页面实现带参异步请求跳转

1.1 beforeRouteEnter

beforeRouteEnter(to, from, next) {
        // // 不同页面跳转 实现页面异步请求数据
        next(vm => { //此处的vm相当于this
            selectroom({
                pageNo: 1,
                pageSize: 3,
                keyword: to.query.roomparm
            }).then((resp) => {
                let code = resp.data.code;
                if (code === 200) {
                    vm.farindex = to.query.index;
                    vm.roomdata = resp.data.data;
                }
            });
        });
    }

2.同页面实现带参异步请求跳转

2.1 beforeRouteUpdate

beforeRouteUpdate(to, from, next) {
        //当组件实例被复用时，这个钩子函数就会在这个情况下被调用。
        this.paramvalue = to.query.roomparm;
        this.farindex = to.query.index;
        selectroom({
            pageNo: 1,
            pageSize: 3,
            keyword: to.query.roomparm
        }).then((resp) => {
            let code = resp.data.code;
            if (code === 200) {
                this.roomdata = resp.data.data;
            }
        });
        next();
    }

2.2 watch

watch: {
        '$route'() {
            this.paramvalue = this.$route.query.roomparm;
            this.farindex = this.$route.query.index;
            selectroom({
                pageNo: 1,
                pageSize: 3,
                keyword: this.$route.query.roomparm
            }).then((resp) => {
                let code = resp.data.code;
                if (code === 200) {
                    this.roomdata = resp.data.data;
                }
            });
        }
    }