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>