vue3.0 router路由跳转传参
方法一:
<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 注意:传参引用的是 const router = useRouter(); 接参引用的是 const router = useRoute(); 不一样,不注意看很容易搞错
方法二: router-link传递
<router-link :to="{name:'deptInfo',params:{user:encodeURIComponent(arr)}}">部门信息</router-link> //name表示路径,params表示参数