VUE---路由传值

路由传值

1.传

import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
// 使用query传值
// 这里将 strTest 传到地址为 /path 的组件
proxy.$router.push({ path: "/path", query: {strTest:"我问你这瓜保熟吗?"} })

可以添加个事件来触发此次传值
传值成功后地址栏如下所示

2.取
移步至 path 组件
同样引入 getcurrentInstance

import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
// 接收值
proxy.$route.query.strTest;
// 这里有一个槽点 注意 是 $route 而非 $router 
// 可以理解为 传值时 跳转使用的是路由器 所以 使用 $router,
// 当路由结束后我们使用的是路由出来的信息 路由器的工作已经完成了 所以使用的是 $route;
// 声明一个变量 打印到页面 
let strTest = proxy.$route.query.strTest;

<template>
<div>{{ strTest }}</div>
</template>