我制作了這個小應用程式，它是一個簡單的 Vue 無服務器 SPA。我希望通過 URL 傳遞一個字串陣列和一個數字陣列，以便我可以與同事共享網站的“狀態”。我知道vue-router可以根據他們的檔案更新路線的引數，但是我沒有足夠的視角來了解如何實作這一點來解決我的問題。我希望得到一些幫助或指導，所以我實際上從中學習。謝謝你們。
編輯：在 Luis Brito 先生的暗示之后。我將以下內容添加到我的代碼（道具）中
const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: require('@/views/Home').default,
props: { myNumbers: [1,2,3]}
},
]
})
在我做的一個組件中
mounted () {
this.$router.push({ name: 'myNumbers', params: {myNumbers: [1,2,3,4] }})
const myNumbers = this.$route.params.myNumbers
console.log(myNumbers);
}
但是現在我的應用程式拋出了一個 Vue-Router 錯誤[vue-router] Route with name 'myNumbers' does not exist，但它確實控制臺記錄了我推送的數字。是否有可能讓我的應用程式尋找道具，并且只有當它們在那里對它們做某事時？否則我會得到一個白屏。
uj5u.com熱心網友回復：
我認為解決此問題的方法是使用vue-router傳遞props給組件的路由，該路由prop可以是包含您提到的兩個陣列的物件。
參考Vue Router - Obect 模式
以下是路由器的示例：
const routes = {
path: '/promotion/from-newsletter',
component: Promotion,
props: { myNumbers: [1,2,3,5,8], myStrings: ['first', 'second', 'third']
}
}
在組件方面，您可以訪問生命周期鉤子props上的那些，或者created()mounted()
mounted() {
const myNumbers = this.$route.params.myNumbers
const myStrings = this.$route.params.myStrings
}
已編輯
要以編程方式傳遞值，最好使用函式模式來捕獲 URL 引數并將其傳遞給組件。另一種方法是創建一個組件，您可以在其中輸入所需的數字和字串，然后呼叫路由器并將這些值傳遞給最終目標組件的路由。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/455685.html