【基于RuoYi-Vue-Plus】路由使用

【基于RuoYi-Vue-Plus】路由使用

实现需求:

由于原来情况是点击按钮显示弹窗表单来进行保存的

需改为点击新增按钮,跳转表单页面实现保存

  1. 路由

    {
        path: '/acct/xxxABC/xxxABCAddEdit',
        component: Layout,
        hidden: true,
        permissions: ['acct:xxxABC:add'],
        children: [
          {
            path: 'index',
            component: () => import('@/views/acct/xxxABC/xxxABCAddEdit.vue'),
            name: 'xxxABCAddEdit',
            meta: { title: 'xxx', activeMenu: '/acct/xxxABC', noCache: true }
          }
        ]
      },
    
  2. 按钮

    <el-button type="primary" plain icon="Plus" @click="handleBatchAdd"
    							v-hasPermi="['acct:xxxABC:add']">批量新增</el-button>
    
  3. 功能列表页实现跳转方法

    const handleBatchAdd = () => {
    	proxy.$tab.closePage(proxy.$route);
    	proxy.$router.push({
    		path: `/acct/xxxABC/xxxABCAddEdit/index`,
    		query: {
    			type: 'add'
    		}
    	});
    };
    

注意,在handleBatchAdd方法中,path的值/acct/xxxABC/xxxABCAddEdit需要加上/index ,暂时还不知道什么原因

image-20250315123726250

测试:

image-20250315131310824

image-20250315131340693

posted @ 2025-03-15 13:05  沙海o  阅读(91)  评论(0)    收藏  举报