[JavaScript知识库]Vue3关于页面跳转(push)的时候，并传递数据过去

首先在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);