Using the nuxt framework, after jumping with router-link, the page component does not display

using the nuxt framework, there are two pages An and B

A page jumps to b page and transmits product information to B page via url

The

B page can get the information and copy it to the goodsList in data, but the page cannot render the page according to goodsList

Click Refresh on the B page to render the page normally

how can you jump through the route and render the page normally

The

A page does not send code if it jumps through router-link with parameters

.

B page code

<template lang="pug">
   div.page
        mt-header(title="")
             router-link( to="/order/orderDetail" slot="left")
                    mt-button(icon="back")
        div.goodsList
            card(v-for="(item,index) in goodsList" 
                :key="index" 
                :isStock="true" 
                :price="item.price"
                :orginalPrice="item.orginalPrice"
                :goodId="item.goodId"
                :goodName="item.goodName"
                @card-select="getSelect" )
        div.btn.center-center(@click="confirm") 


</template>
<script>
import card from "../components/card"
import { Toast } from "mint-ui"
import { refuseOrder } from "../../../../apis/index.js"
import { GetRequest } from "../../../../plugins/utils.js"

export default {
    data: function () {
        return {
            goodsList: [
                // {
                //     price: 10,
                //     orginalPrice: 20,
                //     count: 2,
                //     goodId: 1,
                //     goodName: "",
                //     imgUrl: "../../../assets/images/default.png"
                // }
            ],
            selectList: [   //ID
                // {
                //      goodsProviderID:"xx"
                //      goodsStock:0
                // }
            ],
            orderID: null,
            statusDesc: "",
        }
    },
    components: {
        card: card
    },
    methods: {
        ...any

    },
    created() {
        let _that = this
        
        const req = GetRequest()//url 
        let _goodsList= JSON.parse(req.goodsList)
        
        this.goodsList.push(...__goodsList)
        console.log(this.goodsList)

    },

}

</script>

data from console

clipboard.png

clipboard.png

url

clipboard.png

-Update 18.7.4-
at present, I have just added a timer of 0 seconds to the created. What is the reason for this? vue should have been listening to the data after created, and it should be possible without a timer.

 created() {
          
        settimeout(()=>{
             const req = GetRequest()//url 
            let _goodsList= JSON.parse(req.goodsList)
        
            this.goodsList.push(...__goodsList)
            console.log(this.goodsList)
        
        },0)  
       

    },

this.goodsList.push (. _ _ goodsList) you cannot use push,vue to listen for attributes that do not exist. You can use set or $set

.
Menu