前言

相信大家一定写过后台管理系统，有一个很普遍的功能，就是点击编辑，根据id，跳转到相对应的编辑页面，id是通过路由params传递过去了，但是还有一个需求是要将父组件的名称也传递过去 ，过程特别顺利，一顿操作猛如虎，一看打印undefined！！！请看：  

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

这是接收参数的子组件：

• vue3取消了2.0部分api，所以路由跳转传值方式有所不同。
• 当然有取消，肯定新增也是有的，所以vue3.0新增的API如下：

1. useRoute
2. useRouter

• 使用方法如下:

(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 }});

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

（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 = editProgramNamerouter.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：

打印了好多次还是undefined，突然就想到了params参数会丢失，那么params和query可不可以一起用呢？可以的！修改后的代码如下：

// 编辑
const editProgramItem = (editProgramId: number, editProgramName: string) => {// console.log(editProgramName)// const url = `/programEditDialog/editProgramCom/`passEditIds.value = String(editProgramId)passEditName.value = editProgramNamerouter.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)
})

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

 子组件：

结语：

到这里就结束了，大佬们多多指教 ！