Vue3路由传值

Vue3路由传值

传递对象

传递页面

<script lang="ts">
import { defineComponent, onMounted, reactive, ref, watch } from 'vue'

import { IGetItem, IGetList } from '@/type/types'
import { useRouter } from 'vue-router'

export default defineComponent({
    components: { FormItemView },
    setup() {
        const router = useRouter()



        const jumpToDetail = (item1:IGetItem)=> {
            router.push({
                path:'/formdetail',
                query:{
                    item:encodeURIComponent(JSON.stringify(item1))
                }
            })
        }

        return {
            jumpToDetail
        }
    }
})
</script>

接收页面

<script lang="ts">
import HeaderRightViewVue from '@/components/HeaderRightView.vue'
import router from '@/router'
import { IGetItem } from '@/type/types'
import { defineComponent, reactive, ref } from 'vue'
import { useRoute } from 'vue-router'


export default defineComponent({
    name: "FormDetailViewPage",
    components: {
        HeaderRightViewVue,
        FormDetailHeader
    },
    setup() {
        const route = useRoute()
        let item: IGetItem = {
            author: '',
            ctime: 0,
            utime: 0,
            id: '',
            isStar: false,
            status: 0,
            title: '',
            subTitle: '',
            problems: []
        }
        if (route.query.item !== undefined && route.query.item !== null) {
            item = reactive(JSON.parse(decodeURIComponent(route.query.item.toString())))
        }

        return {
            item
        }
    }
})
</script>