【在Arco Design Vue项目框架中进行复杂菜单路由跳转】

先给大家进行描述一下吧，如果我的描述有误的话大家就直接看视频吧。

效果

即：当我们点击全部订单后，看到table表格后，表格里面有订单详情和特殊操作按钮，然后这时候我们点击订单详情或者特殊操作的时候直接跳转到订单详情页面或则特殊操作页面，并且使用的方法不是显示隐藏，而是路由跳转
那么下面我们一起进入学习区吧
直接上代码吧
因为我用了很多组件，都是组件套组件，所以大家有不清楚的欢迎可以直接私信或者留言

//首先展示的是我们全部订单的那个页面
<template>
  <div class="container">
    <div class="panel header">
      <TitleCup :father-title="fatherTitle" />
      <div>
        <Add class="addButton" :type-option="roleOption" :company-option="roleOption" />
        <batchAdd class="addButton" :type-option="roleOption" :company-option="roleOption" />
      </div>
    </div>
    <Search :type-option="serviceOption" :company-option="companyOption" :role-option="roleOption" />
    //## 标题这个tableCup组件中包括我们将要点击的订单详情和特殊操作按钮，下面给你们展示TableCup组件
    <TableCup :columns="columns" :data="data" :type-option="[]" :company-option="[]" column-resizable
      class="otherOrders" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import TitleCup from '@/components/pageTitle/index.vue';
import TableCup from './components/table.vue';
import Search from './components/search.vue';
import Add from './components/add.vue';
import batchAdd from './components/batchAdd.vue';

interface Props {
  typeOption: object,
  companyOption: object
  businessOption: object
}
defineProps<Props>()

const fatherTitle = ref<string>('全部订单');
// 表格title
const columns = ref<object>([
  {
    title: '订单号',
    dataIndex: 'orderNum',
    type: '1',
    align: 'center',
    fixed: 'left',
    width: 200,
  },
  {
    title: '流水号',
    dataIndex: 'serialNum',
    align: 'center',
    width: 120,
  },
  {
    title: '业务类型',
    dataIndex: 'businessType',
    type: '1',
    align: 'center',
    width: 180,
  },
  {
    title: '案件名称',
    dataIndex: 'caseName',
    align: 'center',
    width: 180,
  },
  {
    title: '申请人',
    dataIndex: 'proposer',
    type: '1',
    align: 'center',
    width: 180,
  },
  {
    title: '时间',
    dataIndex: 'time',
    align: 'center',
    width: 180,
  },
  {
    title: '补正到期时间',
    dataIndex: 'correctTime',
    type: '1',
    align: 'center',
    width: 180,
  },
  {
    title: '状态',
    dataIndex: 'status',
    align: 'center',
    width: 180,
  },
  {
    title: '备注',
    dataIndex: 'remark',
    slotName: 'remark',
    align: 'center',
    width: 180,
  },
  {
    title: '用户',
    align: 'center',
    dataIndex: 'user',
    width: 180,
  },
  {
    title: '所属公司',
    dataIndex: 'subCompany',
    type: '1',
    align: 'center',
    width: 180,
  },
  {
    title: '业务',
    dataIndex: 'service',
    align: 'center',
    width: 180,
  },
  {
    title: '维护',
    dataIndex: 'maintain',
    type: '1',
    align: 'center',
    width: 180,
  },
  {
    title: '写作老师',
    dataIndex: 'writer',
    align: 'center',
    width: 180,
  },
  {
    title: '流程',
    dataIndex: 'flow',
    type: '1',
    align: 'center',
    width: 180,
  },
  {
    title: '支付方式',
    dataIndex: 'payment',
    align: 'center',
    width: 180,
  },
  {
    title: '操作',
    slotName: 'action',
    align: 'center',
    fixed: 'right',
    width: 220,
  },
]);
// 表格数据
const data = ref<object>([
  {
    key: '1',
    orderNum: 'SDS00000000000009',
    serialNum: 'xxxxXXX',
    businessType: '软著普通套餐[软著普通套餐包授权]',
    caseName: '中药饮片销售管理系统',
    proposer: ' XXX有限公司',
    time: '2023-04-16 12:00:00',
    correctTime: '2023-07-26 12:00:00',
    status: '待处理',
    remark: '编辑',
    user: '张三15000000000',
    subCompany: '盛斗士',
    service: '李四13600000000',
    maintain: '王五13600000000',
    writer: '周六13600000000',
    flow: '周日13600000000',
    payment: '已领款',
    action: '订单详情 特殊操作',
  },
  {
    key: '2',
    orderNum: 'SDS00000000000009',
    serialNum: 'xxxxXXX',
    businessType: '软著普通套餐[软著普通套餐包授权]',
    caseName: '中药饮片销售管理系统',
    proposer: ' XXX有限公司',
    time: '2023-04-16 12:00:00',
    correctTime: '2023-07-26 12:00:00',
    status: '待处理',
    remark: '编辑',
    user: '张三15000000000',
    subCompany: '盛斗士',
    service: '李四13600000000',
    maintain: '王五13600000000',
    writer: '周六13600000000',
    flow: '周日13600000000',
    payment: '已领款',
    action: '订单详情 特殊操作',
  },
  {
    key: '3',
    orderNum: 'SDS00000000000009',
    serialNum: 'xxxxXXX',
    businessType: '软著普通套餐[软著普通套餐包授权]',
    caseName: '中药饮片销售管理系统',
    proposer: ' XXX有限公司',
    time: '2023-04-16 12:00:00',
    correctTime: '2023-07-26 12:00:00',
    status: '待处理',
    remark: '编辑',
    user: '张三15000000000',
    subCompany: '盛斗士',
    service: '李四13600000000',
    maintain: '王五13600000000',
    writer: '周六13600000000',
    flow: '周日13600000000',
    payment: '已领款',
    action: '订单详情 特殊操作',
  },
  {
    key: '4',
    orderNum: 'SDS00000000000009',
    serialNum: 'xxxxXXX',
    businessType: '软著普通套餐[软著普通套餐包授权]',
    caseName: '中药饮片销售管理系统',
    proposer: ' XXX有限公司',
    time: '2023-04-16 12:00:00',
    correctTime: '2023-07-26 12:00:00',
    status: '待处理',
    remark: '编辑',
    user: '张三15000000000',
    subCompany: '盛斗士',
    service: '李四13600000000',
    maintain: '王五13600000000',
    writer: '周六13600000000',
    flow: '周日13600000000',
    payment: '已领款',
    action: '订单详情 特殊操作',
  },
  {
    key: '5',
    orderNum: 'SDS00000000000009',
    serialNum: 'xxxxXXX',
    businessType: '软著普通套餐[软著普通套餐包授权]',
    caseName: '中药饮片销售管理系统',
    proposer: ' XXX有限公司',
    time: '2023-04-16 12:00:00',
    correctTime: '2023-07-26 12:00:00',
    status: '待处理',
    remark: '编辑',
    user: '张三15000000000',
    subCompany: '盛斗士',
    service: '李四13600000000',
    maintain: '王五13600000000',
    writer: '周六13600000000',
    flow: '周日13600000000',
    payment: '已领款',
    action: '订单详情 特殊操作',
  },
]);

const serviceOption = ref([
  {
    value: '1',
    label: '软著',
  },
  {
    value: '2',
    label: '国内商标',
  },
  {
    value: '3',
    label: '国内专利',
  },
  {
    value: '4',
    label: '国际专利',
  },
  {
    value: '5',
    label: '审计业务',
  },
]);

const roleOption = ref([
  {
    value: '1',
    label: '盛斗士',
  },
  {
    value: '2',
    label: '安智',
  },
  {
    value: '3',
    label: '文嘉',
  },
]);
</script>

<style scoped lang="less">
@import url('style.less');
</style>

以下是TableCup组件

<template>
  <div class="table_container">
    <a-table :columns="columns" :data="data" :bordered="{ wrapper: true, cell: true }" :scroll="{ x: 1200 }">
      <template #remark="{ remark }">
        <a-button type="primary" @click="handleClick(remark, columns)">编辑</a-button>
      </template>
      <template #action="{ record, rowIndex }">
        <a-space>
          <a-button type="primary" @click="detailHandleClick(record, rowIndex)">订单详情</a-button>
          <a-button type="primary" @click="specialHandleClick(record, rowIndex)">特殊操作</a-button>
        </a-space>
      </template>
    </a-table>
    <a-modal v-model:visible="visible" title="编辑" title-align="start" @cancel="handleCancel">
      <a-form :model="state.form">
        <a-form-item v-for="(item, index) in modifyData" :key="index" :label="item.title">
          <a-input v-if="item.type === '1'" v-model="state.form[`${item.dataIndex}`]" />
          <a-select v-if="item.type === '2' && item.title === '业务类别'" v-model="state.form[`${item.dataIndex}`]"
            placeholder="选择业务类别" allow-clear>
            <a-option v-for="cItem in typeOption" :key="cItem.value" :value="cItem.value">{{ cItem.label }}</a-option>
          </a-select>
          <a-select v-if="item.type === '2' &&
            (item.title === '公司名称' || item.title === '所属公司')
            " v-model="state.form[`${item.dataIndex}`]" placeholder="选择公司名称" allow-clear>
            <a-option v-for="cItem in companyOption" :key="cItem.value" :value="cItem.value">{{ cItem.label }}</a-option>
          </a-select>
          <a-radio-group v-if="item.title === '状态'" v-model="state.form[`${item.dataIndex}`]">
            <a-radio value="正常">正常</a-radio>
            <a-radio value="屏蔽">屏蔽</a-radio>
          </a-radio-group>
          <a-radio-group v-if="item.title === '是否可用抵扣款'" v-model="state.form[`${item.dataIndex}`]">
            <a-radio value="是">是</a-radio>
            <a-radio value="否">否</a-radio>
          </a-radio-group>
          <a-textarea v-if="item.title === '产品介绍'" v-model="state.form[`${item.dataIndex}`]" allow-clear />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import router from '@/router';

interface Props {
  data: object;
  columns: object;
  typeOption: object;
  companyOption: object;
}

defineProps<Props>();
const visible = ref(false);
const state = reactive({
  form: {},
});

const modifyData = ref([]);
const handleClick = async (record, columns) => { };

//以下是重点内容
const detailHandleClick = (record, columns) => {
  const orderId = record.id;
  //大家可能再找这个path是从哪里来的呢，下面揭晓答案
  const path = '/softwareOrder/all_allOrders_detail';
  router.replace(`${path}?orderId=${orderId}`);
};

const specialHandleClick = (record, columns) => {
  const orderId = record.id;
  const path = '/softwareOrder/all_allOrders_special';
  router.replace(`${path}?orderId=${orderId}`);
};


const handleCancel = () => {
  visible.value = false;
};
</script>

<style scoped lang="less"></style>

//这是router中的software全部的路由，就是在路由中补上特殊操作和订单详情的路由即可

import { DEFAULT_LAYOUT } from '../base';
import { AppRouteRecordRaw } from '../types';
// @ts-ignore
const softwareOrder: AppRouteRecordRaw = {
  path: '/softwareOrder',
  name: 'softwareOrder',
  component: DEFAULT_LAYOUT,
  meta: {
    locale: 'menu.order',
    requiresAuth: true,
    icon: 'icon-unordered-list',
    order: 4,
  },
  children: [
    // 全部订单
    {
      path: 'allOrders',
      name: 'allOrders',
      component: () => import('@/views/softwareOrder/allOrders/index.vue'),
      meta: {
        locale: 'menu.order.all',
        requiresAuth: true,
      },
    },
    {
      path: 'all_allOrders_special',
      name: 'all_allOrders_special',
      component: () => import('@/views/softwareOrder/allOrders/components/spliceOperate/index.vue'),//这是我们特殊操作页面具体内容，我就不展示啦，自由填写即可，就是当点击特殊操作你想跳转到的那个页面
      meta: {
        locale: '特殊操作',
        requiresAuth: true,
        hideInMenu: true,//这个是一个很重要的属性，一定要记得书写
      }
    },
    {
      path: 'all_allOrders_detail',
      name: 'all_allOrders_detail',
      component: () => import('@/views/softwareOrder/allOrders/components/orderDetails/index.vue'),
      meta: {
        locale: '详细订单',
        requiresAuth: true,
        hideInMenu: true,//这个是一个很重要的属性
      }
    },
  ],
};
export default softwareOrder;

一起试起来吧，不清楚的欢迎大家留言哦