vue3.0 router路由跳转传参

作者: adm 分类: vue 发布时间: 2023-08-25

方法一:

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

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!