Vue3 跳转另一个页面或弹框

已于 2024-04-12 14:53:47 修改
阅读量378 收藏
点赞数 8
文章标签： 前端 vue.js
于 2024-04-12 13:57:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44190874/article/details/137677845
版权

Vue3 跳转另一个页面或弹框

1、主页面

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="20" :xs="24">
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="80px">
          <el-form-item label="权限名称">
            <el-input
                v-model="queryParams.map.saName"
                placeholder="请输入权限名称"
                clearable
                style="width: 240px"
            />
          </el-form-item>
          <el-form-item label="权限Code">
            <el-input
                v-model="queryParams.map.saCode"
                placeholder="请输入Code"
                clearable
                style="width: 240px"
            />
          </el-form-item>

          <el-form-item label="所属菜单">
            <el-tree-select placeholder="请选择菜单" v-model="queryParams.map.saSmId" :data="menuOptions"
                            :render-after-expand="false" clearable/>
          </el-form-item>

          <el-form-item>
            <el-button :color="global.btnColor" icon="Search" @click="handleQuery" v-if="proxy.$checkAuth('SYS_AuthSelect')">搜索</el-button>
            <el-button icon="Refresh" @click="handleReset" v-if="proxy.$checkAuth('SYS_AuthReset')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button :color="global.btnColor" plain icon="Plus" @click="handleAdd" v-if="proxy.$checkAuth('SYS_AuthAdd')">新增</el-button>
      </el-col>
    </el-row>
    <handle-auth ref="handleRef" @getAuthList="getAuthList"></handle-auth>


    <div class="tbMain">
      <el-table :data="authList" border stripe style="width: 100%"
                :header-cell-style="{'background-color':'#4991DD','color':'#ffffff'}" empty-text="无数据">
        <el-table-column prop="saName" label="权限名称" align="center"/>
        <el-table-column prop="saCode" label="权限Code" align="center"/>
        <el-table-column prop="menuName" label="所属菜单" align="center"/>
        <el-table-column prop="saNote" label="备注" align="center"/>
        <el-table-column prop="saIsuse" label="是否使用" align="center">
          <template #default="scope">
            {{ scope.row.saIsuse ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px" align="center">
          <template #default="scope">
            <el-tooltip content="修改" placement="top" v-if="proxy.$checkAuth('SYS_AuthEdit')">
              <el-button :color="global.btnColor" circle plain size="small" icon="Edit"
                         @click="handleEdit(scope.row.saId)"></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top" v-if="proxy.$checkAuth('SYS_AuthDelete')">
              <el-button type="danger" circle plain size="small" icon="Delete"
                         @click="handleDelete(scope.row.saId)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="float: right;margin-top: 10px;" background layout="total, prev, pager, next" :locale="zhCn"
                     small :current-page="curPage" :page-size="queryParams.pageSize" :total="total"
                     @current-change="curChange"/>
    </div>

  </div>


</template>

<script lang="ts" setup>
import {ElMessage, ElMessageBox} from 'element-plus'
import {getCurrentInstance, inject, onMounted, ref} from 'vue';
import zhCn from 'element-plus/lib/locale/lang/zh-cn';
import HandleAuth from "./handleAuth.vue";

const global: any = inject('global');
const authList = ref([]);
const total = ref(0);
const handleRef = ref();
const dateRange = ref([]);
const curPage = ref(1);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  map: {
    saName: "",
    saCode: "",
    saSmId: ""
  }
});

const {proxy} = getCurrentInstance()

const menuOptions = ref([]);
const emit = defineEmits(['routerView'])

onMounted(() => {
  //加载菜单下拉列表
  global.axiosUtil.ajax_get(global.baseUrl + "/systemapi/sysMenu/getMenuDownList", function (res) {
    menuOptions.value = res.data;
  });
  //加载
  getAuthList();
});

const getAuthList = () => {
  global.axiosUtil.ajax_post(global.baseUrl + "/systemapi/sysAuth/getAuthList", queryParams.value, function (res: any) {
    authList.value = res.data
    total.value = res.recordsTotal
  });
}

const handleAdd = () => {
  handleRef.value.handleAdd();
}

//跳转弹框或另一个页面
const handleEdit = (value: string) => {
  handleRef.value.handleEdit(value);
}

const handleDelete = (value) => {
  ElMessageBox.confirm(
      '请确定是否删除当前用户数据?',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    global.axiosUtil.ajax_get(global.baseUrl + "/systemapi/sysAuth/deleteAuthBySaId/" + value, function (res) {
      if (res.altStr == '1') {
        ElMessage.success('删除成功!')
        getAuthList()
      } else {
        getAuthList()
      }
    });
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '删除取消',
    })
  })
}

const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getAuthList()
}

const handleReset = () => {
  curPage.value = 1
  queryParams.value.pageNum = 1;
  queryParams.value.map = {
    saName: "",
    saCode: "",
    saSmId: ""
  }
  dateRange.value = []
  getAuthList()
}

const curChange = (currentPage) => {
  curPage.value = currentPage
  if (curPage.value == 1) {
    queryParams.value.pageNum = 0
  } else {
    queryParams.value.pageNum = (curPage.value - 1) * queryParams.value.pageSize
  }
  getAuthList()
}
</script>

<style scoped>
.tbMain {
  margin-top: 8px;
}
</style>
  1. 主页面重要的是引用，主要需要下面四点引用
<handle-auth ref="handleRef" @getAuthList="getAuthList"></handle-auth>

<el-button :color="global.btnColor" circle plain size="small" icon="Edit"  @click="handleEdit(scope.row.saId)"></el-button>

import HandleAuth from "./handleAuth.vue";

const handleEdit = (value: string) => {
  handleRef.value.handleEdit(value);
}

2、子页面

<template>
  <el-dialog v-model="handleDialogVisible" :title="titleName" width="30%" destroy-on-close draggable
             :close-on-click-modal="false">

    <el-form :model="formData" :rules="rules" ref="ruleFormRef" label-width="90px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="权限名称" prop="saName">
            <el-input v-model="formData.saName" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="权限Code" prop="saCode">
            <el-input v-model="formData.saCode" clearable :disabled="formData.saId != null"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="所属菜单" prop="saSmid">
            <el-tree-select v-model="formData.saSmid" :data="menuOptions" :render-after-expand="false" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否使用">
            <el-switch v-model="formData.saIsuse"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="排序" prop="saSort">
            <el-input-number v-model="formData.saSort" class="mx-4" :min="0"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input v-model="formData.saNote" type="textarea" clearable/>
          </el-form-item>
        </el-col>
      </el-row>


    </el-form>

    <template #footer>
        <span class="dialog-footer">
          <el-button :color="global.btnColor" @click="submitInfo(ruleFormRef)">确 定</el-button>
          <el-button @click="cancelDialog(false)">取 消</el-button>
        </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>

import {ref, reactive, inject, onMounted, toRefs, defineProps, defineExpose} from 'vue';
import type {FormInstance, FormRules} from 'element-plus'
import {ElMessage, ElMessageBox} from 'element-plus'

const global: any = inject('global');
const emit = defineEmits(['getAuthList'])

const handleDialogVisible = ref(false);
const ruleFormRef = ref<FormInstance>();
const titleName = ref('');
const formData = ref({
  saId: null,
  saName: null,
  saCode: null,
  saSmid: null,
  saSort: 0,
  saNote: "",
  saIsuse: true
});

const handleAdd = () => {
  handleDialogVisible.value = true
  titleName.value = '添加权限'
  formData.value = {
    saId: null,
    saName: null,
    saCode: null,
    saSmid: null,
    saSort: 0,
    saNote: "",
    saIsuse: true
  }
}
const menuOptions = ref([]);


onMounted(() => {
  global.axiosUtil.ajax_get(global.baseUrl + "/systemapi/sysMenu/getMenuDownList", function (res) {
    menuOptions.value = res.data;
  });
});

//提交数据
const submitInfo = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (formData.value.saId != undefined && formData.value.saId != null) {//编辑
        global.axiosUtil.ajax_post(global.baseUrl + "/systemapi/sysAuth/updateAuth", formData.value, function (res) {
          if (res.altStr == "1") {
            ElMessage.success('修改成功!')
            emit("getAuthList");
            handleDialogVisible.value = false
          }
        });
      } else {//新增
        global.axiosUtil.ajax_post(global.baseUrl + "/systemapi/sysAuth/addAuth", formData.value, function (res) {
          //console.log(res)
          if (res.altStr == "-1") {
            ElMessage.error('权限Code已经存在!')
          } else if (res.altStr == "1") {
            ElMessage.success('添加成功!')
            emit("getAuthList");
            handleDialogVisible.value = false
          }
        });
      }
    } else {
      ElMessage.error('请输入正确后再提交信息!')
    }
  })
};

const handleEdit = (value: string) => {
  handleDialogVisible.value = true
  titleName.value = '编辑权限'
  global.axiosUtil.ajax_get(global.baseUrl + "/systemapi/sysAuth/getAuthDetailBySaId/" + value, function (res) {
    formData.value = res.data
  });
};


//添加或修改表单验证
const rules = reactive<FormRules>({
  saName: [
    {required: true, message: '请输入权限名', trigger: 'blur'},

  ],
  saCode: [
    {required: true, message: '请输入权限Code', trigger: 'blur'},
  ],
  saSmid: [
    {required: true, message: '请选择所属菜单', trigger: 'change'},
  ],
  saSort: [
    {required: true, message: '请输入排序', trigger: 'blur'},
  ],
})

//添加或修改用户取消操作
const cancelDialog = (value: boolean) => {
  handleDialogVisible.value = value
  formData.value = {
    saId: null,
    saName: null,
    saCode: null,
    saSmid: null,
    saSort: 0,
    saNote: "",
    saIsuse: true
  }
  //清空表单验证
  ruleFormRef.value.clearValidate()
}
//跳转弹框或另一个页面
defineExpose({
  handleDialogVisible,
  handleAdd,
  handleEdit,
  cancelDialog
});

</script>

<style scoped>

</style>
  1. 子页面主要需要定义对应变量以及方法
const handleDialogVisible = ref(false);

const handleAdd = () => {
  handleDialogVisible.value = true
  titleName.value = '添加权限'
  formData.value = {
    saId: null,
    saName: null,
    saCode: null,
    saSmid: null,
    saSort: 0,
    saNote: "",
    saIsuse: true
  }
}

const handleEdit = (value: string) => {
  handleDialogVisible.value = true
  titleName.value = '编辑权限'
  // console.log(value)
  global.axiosUtil.ajax_get(global.baseUrl + "/systemapi/sysAuth/getAuthDetailBySaId/" + value, function (res) {
    // console.log(res)
    formData.value = res.data
  });
};

//添加或修改用户取消操作
const cancelDialog = (value: boolean) => {
  handleDialogVisible.value = value
  formData.value = {
    saId: null,
    saName: null,
    saCode: null,
    saSmid: null,
    saSort: 0,
    saNote: "",
    saIsuse: true
  }
  //清空表单验证
  ruleFormRef.value.clearValidate()
}

defineExpose({
  handleDialogVisible,
  handleAdd,
  handleEdit,
  cancelDialog
});

直接可用，简单增删改列表+弹框。

大江江
关注
  • 8
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue从一个页面跳转到另一个页面并携带参数的解决方法
10-16
主要介绍了vue从一个页面跳转到另一个页面并携带参数的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue3页面跳转
weixin_62918410的博客
03-07 1万+
vue3的页面跳转有两种方式，第一种是标签内跳转，第二种是编程式路由导航
若依前端vue3页面组件
weixin_45765215的博客
11-24 1633
/</</</
vue3实现页面跳转
最新发布
每天都想吃好吃的
02-29 864
接下来，我们可以在组件中使用。在Vue 3中，可以使用。
Vue3.0 页面跳转的 5 种方式
热门推荐
H_jrqn的博客
07-26 3万+
Vue 页面跳转的 5 种方式
vue3配置router路由并实现页面跳转
Gemini仔仔的专栏
04-23 8776
但是history也是有缺点的，不怕前进后退跳转，就怕刷新（如果后端没有准备的话），因为刷新是实实在在地去请求服务器了。ps：引入文件时记得新建view文件夹以及里面的A、B.vue两个页面。与之对应的，通过点击链接实现导航的方式，叫做声明式导航。通过调用 API 实现导航的方式，叫做编程式导航。2.1文件中引入vue方法、配置页面具体路径。vue-router 中的编程式导航 API。1. 普通网页中点击。// 第二种跳转方法。
vue页面跳转实现页面缓存操作
11-20
打野在A页面野区进行一波骚操作打了一只蓝爸爸，然后点击导航栏跑到B页面的野区秀操作打了一只红爸爸，然后他又回到A野区，希望A野区还是只有一只蓝爸爸被打的状态，其他野没被偷 第一步 在路由里面设置需要缓存的...
vue页面跳转后返回原页面初始位置方法
11-28
vue页面跳转到新页面之后，再由新页面返回到原页面时候若想返回调出原页面的初始位置，怎么来解决这个问题呢？首先我们应该在跳出页面时候记录下跳出的scrollY，返回原页面的时候在设置返回位置为记录下的scrolly...
Vue3.0 页面路由跳转的方式
mq1314520_zhl的博客
12-29 2499
Vue3.0 页面路由跳转的几种 方式
vue-router跳转路由打开新窗口的方式(3-4版本都适用)
weixin_68658847的博客
05-11 2506
vue-router跳转路由打开新窗口的方式(3-4版本都适用)
实现：Vue点击按钮，跳转到新的页面。
ftz123666的博客
07-10 7533
第一种方法：routerLink标签-添加target=
Vue3: vue-router页面跳转
西魏陶渊明的博客
12-28 2639
【代码】Vue3: vue-router页面跳转。
【vue3路由】单击按钮、跳转页面
m0_67986791的博客
03-27 4887
【代码】【vue3路由】单击按钮、跳转页面。
vue实现点击按钮，弹出对话框
qq_44206870的博客
11-08 4829
vue实现点击按钮，弹出对话框
vue之弹框
ramsey17的博客
06-27 2351
弹框的“新增/修改角色”标题根据states的值来控制，编辑时，“人员名称”处于禁用状态；由于弹框的参数满足不了（少）接口的参数，通过@change="pickDepartment2"事件来操作数据；列表中的操作栏：通过slot-scope="scope"来接收作用域插槽的数据（添加属性slot-scope，并且定义对象scope），scope.row拿到对应行的数据；实现如下需求，点击新增或者行中的编辑按钮，弹出弹框编辑数据。methods：接口的字段定义不规范，作了个兼容😔。省略其它代码......
vue3 组件刷新 在A页面点击事件，B页面内容刷新教程（超实实用）
qq_53722480的博客
04-08 1740
【代码】vue3 组件刷新 在A页面点击事件，B页面内容刷新教程（超实实用）
Vue3写一个页面查询弹框
04-11
好的，我可以为您提供关于Vue3写一个页面查询弹框的解答。首先，您可以使用Vue3的组件库Element-Plus来实现这个功能。具体步骤是：使用el-input组件获取用户输入的查询条件，使用el-dropdown组件实现下拉选项，当用户点击查询按钮时，使用el-table组件渲染数据，并使用el-dialog组件显示查询结果弹框。希望这个回答可以帮到您。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值