vue-router - Vue3：通过 toRefs 访问 props 收到错误消息

Question

我在这里将 toRefs(props) 称为 vue 官方文档：https ://v3.vuejs.org/guide/composition-api-setup.html#props

但是 - 如果我使用低于 d.value 我在浏览器控制台中收到如下错误：

runtime-core.esm-bundler.js:38 [Vue 警告]：在 <DetailedView data="[{"Date":"2020-05","Scope":"EMEA ... .onVnodeUnmounted=fn ref=Ref<null >> at at

似乎已经收到了道具，但数据的访问是一个问题。

你能在这里阐明一下吗？

谢谢

@/router/index.ts

//this is the router definition, set the "props" as true, as to receive the parameters from the router as props
 {
        path: "/detailedview",
        name: "DetailedView",
        component: DetailedView,
        props: true
    
    }

@/component/overview.vue

//this is where the data is from. tableData is an ref array
import {router} from "@/router/index";
const data = JSON.stringify(tableData.value);
router.push({name:"DetailedView", params:{data: data}});

@/component/DetailedView.vue

//this is the router jump to   = DetailedView
import {router} from "@/router/index";
export default defineComponent({
        name: "DetailedView",
        props: {data: String},
        setup(props, { attrs, slots, emit }){            
  
         let { d }= toRefs(props)
         console.log("d is:", d.value);  //error message populate here
        
         let m = props.data;
         console.log("m is:", m);  //OK. But it will remove props reactivity.

标签： vue-routervuejs3