前言
記錄Vue的路由傳參方法
引數在url路徑上顯示
方法一
$router.push傳參
//傳參：
this.$router.push({ path: '/xxxxxxxx', query: { str: '傳過去的值' }})
//接收：
this.string = this.$route.query.str
方法二
路由配置傳參
//配置：
path: '/xxxxxxxx/:msg',
props: true,
//傳參：
this.$router.push('/xxxxxxxx/' + '傳過去的值')
//接收：
props: {
msg: {
// 定義所傳值的型別
type: String,
required: true
}
}
方法三
路由配置傳參(物件)
//配置：
path: '/xxxxxxxx/:msg',
props: true,
//傳參：
this.$router.push('/xxxxxxxx/' + encodeURIComponent(JSON.stringify(Object))
//接收：
props: {
msg: {
// 定義所傳值的型別
type: String, // 通過上頁面轉成了String
required: true
}
}
//使用：
var obj= JSON.parse(this.msg)
原理：
1、使用encodeURIComponent(JSON.stringify(Object))把字串作為 URI 組件進行編碼
2、接著使用 JSON.parse(decodeURIComponent(this.msg)) 或者 decodeURIComponent(JSON.parse(this.msg))進行解碼轉換為Object
3、上面兩種哪個正確的不知道，兩個我都拿不到Object，直接JSON.parse(this.msg)就拿到資料了
引數不在url路徑上顯示
筆記丟失，日后補充...
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/270849.html
標籤：Html/Css
下一篇：Vue中組件重新渲染