如何使用 Vue 路由器在 Vue 3 中將物件作為道具傳遞？這可以在 Vue 2 中按照此處接受的答案及其相應的JSFiddle 來實作。在 Vue 3 中，與 Vue 2 相比，此語法將推送的物件字串化為“[object Object]”。我在下面的小提琴中嘗試了 Vue 3 。
const Home = { template: '<div>Home</div>',
mounted: function() {
this.$router.push({
name: "about",
params: {
user: "User Name",
objectParam: {a: "a"}
}
})
}}
const About = { template: '<div>About</div>',
props: ['user', 'o', 'objectParam'],
mounted: function(){
console.log( "Passed props:" )
console.log( this.$props )
}}
const routes = [
{ path: '/', component: Home },
{ path: '/about', name:"about", component: About,
props: route => (
console.log("Params defined here are passed as objects."),
console.log("But route params object passed via push has already been stringified."),
console.log(route.params),
{o: {b: "b"},
...route.params
})},
]
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes,
})
const app = Vue.createApp({})
app.use(router)
app.mount('#app')
可以通過 Vue 3 中的 Vue Router push() 傳遞物件嗎？
uj5u.com熱心網友回復：
我找不到任何來自 Vue Router 的官方檔案來支持這一點，老實說，我認為將動態物件作為引數發送不是一個好主意，但如果你真的想這樣做，實作它的一種方法是字串化你的物件，然后在接收端決議它。所以是這樣的：
this.$router.push({
name: "about",
params: {
user: "User Name",
objectParam: JSON.stringify({ a: "a" })
}
})
然后在另一個組件中：
JSON.parse(this.$route.params.objectParam)
uj5u.com熱心網友回復：
我冒著風險說我認為這在 Vue3 中是不可能的。
你可以看看像Vuex這樣的狀態管理器，看看它是否能解決你的問題。狀態管理器概念將允許您跨多個視圖保留復雜物件。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/406881.html
標籤：
下一篇：將道具傳遞給Vue中的停用組件