vue3页面传值

vue3的页面传值

需要引入

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

1、query和params

A页面

const route = useRouter();
let btn =  (i) => {
  console.log('i :>> ', i);
  // router.push({
  //   path:'about',
  //   query:{
  //     data:JSON.stringify(i)
  //   }
  // })
    router.push({
    name:'about',
    params:{
      data:i
    }
  })
}

B页面

const route = useRouter();

console.log('route.params :>> ', JSON.parse(route.query.data));
query ：补充
1、会在页面url拼接参数，不推荐。
2、当前页面刷新，页面有值，跳转之后再刷新，参数消失。
3、解决之法，只有在router路由配置里面，路径去拼接 例如："/about/:id" 非常麻烦。
4、需要转json字符串。
5、query结合path使用。

console.log('route.params :>> ', route.params);
parasm：补充
1、不会在页面url拼接参数，比较美观。
2、params结合name使用。
3、在vue2没发现这个问题，vue3会存在无法取值的问题，值为空。

解决params跳转值为空

尝试通过

import { onMounted, ref } from "vue";
幻想进入页面就去获取

onMounted(() => {
  console.log('params :>> ', params);
})

依旧无值，解决方法。待更新