我舉個例子簡單描述我的問題
我有三個vue頁面(home、page1、page2)

home有一顆按鈕按下去導到page1

page1有兩顆按鈕
一顆是要導到page2的
一顆是要做回到上一頁(home)

page2只有一顆回到上一頁的按鈕

home會傳遞一個object給page1

以下是我如何跳頁與傳遞參數的方法

home:

<!--
這邊item的內容大概長這樣
item:{
    id:1,
    name:'test',
    content:'test,test'
    .....
    .....
}
-->
<div>
  Home
</div>

<buttom @click="$router.puth({name:'page1', query:{'item': item})">Go Page1</buttom>


<script>
    export default {
        name: "home",
        data() {
        }
        created() {
        }
    }
</script>

page1:

<div>
  Page1<br>
  <!--這頁會顯示item的內容-->
  {{item}}
</div>

<buttom @click="$router.puth({name:'page2')">Go Page2</buttom>

<buttom @click="$router.go(-1)">Go Back</buttom>

<script>
    export default {
        name: "page1",
        data() {
            item: this.$route.query.item,
        }
        created() {
        }
    }
</script>

page2:

<div>
  Page2
</div>

<buttom @click="$router.go(-1)">Go Back</buttom>

<script>
    export default {
        name: "page2",
        data() {
        }
        created() {
        }
    }
</script>

問題來了
這邊我有試過
如果不傳遞object
而單單只有傳遞一組id
例如

$router.puth({name:'page1', query:{'id': 123})

當我頁面到了page2後按上一頁
回到page1
並console這個id
id的值還會存在

但是當我傳遞object
卻不能有同等效果

這是為什麼？
有什麼方法可以解決？當我回上頁後可以真的回到上頁狀態(保留item內容)