首先在A页面

Detail为事件名,Shuju为要传递的数据

<!-- 跳转到详情页面 B.vue的页面 -->
<a href="#" @click="Detail(Shuju)">详情</a>
这个是用query的

path为要跳转的路径,而query为要传递的数据,这里我的Shuju是一个对象,所以省略了{}这个

// 跳转到详情的页面
const router = useRouter()
 const Detail = (Shuju)=>{
     router.push({
         path:'/detail',
         query:Shuju
         // 多个参数这样的写法
         // query:{Shuju}
     })
 }
在B页面接收
const route = useRoute()
//打印传递过来的数据
console.log(route.query);
另外一种做法,用params

使用name+params
name是:你定义路由的name
params中传递的数据不能为整个对象的,而是需要单个数据对应的键名

const Detail = (Shuju)=>{
     router.push({
         name:'Detail',
         params:{
             "context":Shuju.context
         }
     })
 }

接收

const route = useRoute()
console.log(route.params.context);
Logo

前往低代码交流专区

更多推荐