vue3+ts+vite--路由跳转，params传参好像丢失了？

前言

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

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

这是接收参数的子组件：

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

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

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

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

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

// 编辑
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)
})

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