vue3跳转传参

lovelilt

vue2写法

1.加入传递的参数值

<router-link :to="{name:'generate', query:{ couponId: record.id }}">绑定账号</router-link>
2. 页面接收参数

const couponId = this.$route.query.couponId

vue3中与vue2不同:

<router-link :to="'/bindAccount/' + scope.row.id" class="link-type">

       <el-button type="text" icon="el-icon-link">绑定账号</el-button>

</router-link>

路由中：

{

//绑定账号

path: "/bindAccount/:id(\\d+)",

name: "bindAccount",

meta: {

        title: "绑定账号",

        auth: true,

       },

component: () => import("/@views/user/bindAccount.vue"),
},

其他方式跳转传参：

//方法一
//A页面传

import { getCurrentInstance } from "vue";

let { proxy }: any = getCurrentInstance();

proxy.$root.$router.push({ name: "set-meal", query: { mealMenuId: scope.id } });

//B页面接收

import { getCurrentInstance } from "vue";

let { proxy }: any = getCurrentInstance();

proxy.$root.$route.query.mealMenuId

//方法二
//或者同样可以用这个 //A页面传

import { useRouter ,useRoute} from "vue-router";

const router = useRouter();

router.push({ name: "set-meal", query: { mealMenuId: scope.id } })

//B页面接收

import { useRouter ,useRoute} from "vue-router";

const router = useRouter();

router.currentRoute.value.query.mealMenuId

//方法三
//如果不想让数据出现在url栏可以将query改为params，A页面传参

import { useRouter ,useRoute} from "vue-router";

const router = useRouter();

router.push({ name: "set-meal", params: { mealMenuId: scope.id } })

//B页面接收
import { useRouter ,useRoute} from "vue-router";

const router = useRouter();

router.currentRoute.value.params.mealMenuId