RabbitMQ什么情况下会丢失消息

前言

这是需要点击编辑的父组件：

这是接收参数的子组件：

(1）：在父组件引入useRouter，并且定义变量接收一下useRouter：

import { useRouter } from 'vue-router';

const router = useRouter();

（2）：路由跳转

//单纯的跳转路由 
router.push('msg');

 
//对象形式
router.push({path:'msg'});


//命名路由，我的命名路由是Msg;id和passVlue是自定义传参的名称,input.value是input要输入的内容
router.push({ name:'EditItem',params: { id: passEditIds.value, passName:  editProgramName }});

所以根据视频操作，我的功能完全代码如下：

20241018-141939

（1）:想要根据id跳转，就得配置路由，所以在router.ts组件配置：

//引入要跳转的编辑组件，下面是我自己的路径
import editProgramCom from '../views/screenAdvertising/programEditDialog/editProgramCom.vue'


 
// program -- 跳转编辑组件
  {
    path: `/editProgramCom/:id`,
    name: 'EditItem',
    component: editProgramCom,
    props: true
     // 确保传递 params 作为 props  
  }

（2）：父组件，通过命名路由跳转携带id：

// 编辑
const editProgramItem = (editProgramId: number, editProgramName: string) => {
    // console.log(editProgramName)
    // const url = `/programEditDialog/editProgramCom/`
    passEditIds.value = String(editProgramId)
    passEditName.value = editProgramName
    router.push({ name: 'EditItem', params: { id: passEditIds.value, passName:  editProgramName } });
}

（2.1）：说明：事件括号里面的参数都是通过插槽scope.row获取的，如果想获取id就是scope.row.id,如果是name就是scope.row.name，当然我的数据结构是这样，具体一定要打印数据结构再取值，代码：

<el-table-column prop="operation" label="操作">
                            <template #default="scope">
                                <el-button size="small"
                                    @click="editProgramItem(scope.row.id, scope.row.name)">编辑</el-button>
                                <el-button size="small" @click="eazyEditProgram(scope.row)">简单编辑</el-button>
                                <el-button size="small" @click="delProgramItem(scope.row.id)">删除</el-button>
                            </template>
                        </el-table-column>

现在就要点击编辑然后跳转了，然后就是undefined：

20241018-145120

// 编辑
const editProgramItem = (editProgramId: number, editProgramName: string) => {
    // console.log(editProgramName)
    // const url = `/programEditDialog/editProgramCom/`
    passEditIds.value = String(editProgramId)
    passEditName.value = editProgramName
    router.push({ name: 'EditItem', params: { id: passEditIds.value, }, query: { passName: editProgramName } });
}

 子组件接收代码，引入API如下：

import { useRoute } from 'vue-router'


const route = useRoute()    


//接收，这里偷懒，没有用变量接收，只是给伙伴们看下用法
onMounted(() => {
    // passData()
    console.log(route.params.id,route.query.passName)
})

效果图-点击编辑，名称是自由飞翔：

 子组件：

结语：