vue3.0 router路由跳转传参（router.push）

方法一：

<script lang="ts" setup>

     import { useRouter } from "vue-router";

     const router = useRouter();

 

//打开新界面

const bb = (tuanId: any, id: any) =>{

 let rowshenFapiao = router.resolve({

        path: "/fapiao/request/insert",

        query: {

            id: tuanId,  //id传递参数

            contractid: id  //contractid传递参数

        }

    });

    window.open(rowshenFapiao.href, '_blank');

}

 

//带参数查询  不是打开新界面 变成  /fapiao/request/insert?id&contractid

 router.push({

        path: "/fapiao/request/insert",

        query: {

            id: tuanId,   //id传递参数

            contractid: id   //contractid传递参数

        }

    });

 

//命名路由

 router.push({

        name: "/fapiao/request/insert",

        params: {

            id: tuanId,   //id传递参数

            contractid: id   //contractid传递参数

        }

    });

 

</script >

 

//方法路由接收值

import { useRoute } from 'vue-router'

 

 const router = useRoute();

方法一：query

 const tuanduiId = router.query.id;   //团队id

 const hetongId = router.query.contractid;   //合同id

 

 方法二：params

 const tuanduiId = router.params.id;   //团队id

 const hetongId = router.params.contractid;   //合同id

 

 

方法二： router-link传递

<router-link :to="{name:'deptInfo',params:{user:encodeURIComponent(arr)}}">部门信息</router-link>  //name表示路径，params表示参数