Vue+iView 跳转页面并传值

最新推荐文章于 2024-02-09 08:00:00 发布

Taeyeon-IU

最新推荐文章于 2024-02-09 08:00:00 发布

阅读量1.1k

点赞数 1

分类专栏：前端文章标签： vue.js vue

本文链接：https://blog.csdn.net/qq_36649922/article/details/117479476

版权

本文介绍了在Vue+iView框架下如何实现页面间传值和跳转。首先在store的index.js中设置状态管理，声明并处理传入参数。接着，通过设置参数值并调用路由跳转到目标页面。在目标页面的created钩子中接收参数。为防止重复传值，需在关闭弹窗的方法中将判断条件设为false，同时考虑用户通过弹窗关闭按钮关闭时的情况，禁用closable和mask-closable属性确保参数正确更新。

摘要由CSDN通过智能技术生成

1. 打开src/store文件夹下的index.js文件，设置传入的参数temp_id和判断参数openDialog，主要在state声明变量，mutations和action设置方法，方法名最好唯一，getters设置判断参数，便于获取；

import Vue from 'vue';
import Vuex from 'vuex';

import admin from './modules/admin';

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        temp_id: '',
        openDialog: false
    },
    mutations: {
        get_temp_id(state, id) {
            state.temp_id = id;
        },
        change_openDialog(state, flag) {
            state.openDialog = flag;
        }
    },
    action: {
        handle_temp_id(context, id) {
            context.commit('get_temp_id', id);
        },
        handle_openDialog(context, flag) {
            context.commit('change_openDialog', flag);
        }
    },
    getters: {
        isShow(state) {
            return state.openDialog
        }
    },
    modules: {