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表示参数

