資訊專欄INFORMATION COLUMN
摘要：傳參方式模塊名稱各參數(shù)傳參張三效果頁面顯示張三但是刷新頁面后，數(shù)據(jù)會丟失，顯示。缺點(diǎn)參數(shù)值都拼接在上，會很長，同時都可被看到。模塊名稱各參數(shù)路由文件設(shè)置的時候把參數(shù)拼到里。老老實(shí)實(shí)的用存儲。銷毀頁面的時候把存儲的內(nèi)容清除。
Vue Router 傳參方式： 1. this.$router.push({ name: "模塊名稱", params: { // 各參數(shù) } }) router.js：
export default new Router({
routes: [
{
path: "/paramsPassingByRouter",
component: ParamsPassingByRouter,
children: [
{
path: "paramsMode",
name: "paramsMode",
component: ParamsMode
}
]
}
]
})
ParamsPassingByRouter.vue：
ParamsMode.vue：
效果：{{ testData }}
url：http://localhost:8081/#/paramsPassingByRouter/paramsMode
頁面顯示：{"id":"20180101","name":"張三","aka":"z3","age":"18"}
但是刷新頁面后，數(shù)據(jù)會丟失，顯示：{}。
2. this.$router.push({ name: "模塊名稱", query: { // 各參數(shù) } }) router.js：export default new Router({
routes: [
{
path: "/paramsPassingByRouter",
component: ParamsPassingByRouter,
children: [
{
path: "queryMode",
name: "queryMode",
component: QueryMode
}
]
}
]
})
ParamsPassingByRouter.vue：
QueryMode.vue：
效果：{{ testData }}
url：http://localhost:8081/#/paramsPassingByRouter/queryMode?id=20180101&name=%E5%BC%A0%E4%B8%89&aka=z3&age=18
頁面顯示：{"id":"20180101","name":"張三","aka":"z3","age":"18"}
刷新頁面后，數(shù)據(jù)不會丟失。
解決刷新頁面數(shù)據(jù)丟失的方案：
使用 this.$router.push({ name: "模塊名稱", query: { // 各參數(shù) } }) 方式傳參。
缺點(diǎn)：參數(shù)值都拼接在 url 上，url 會很長，同時都可被看到。
this.$router.push({ name: "模塊名稱", params: { // 各參數(shù) } }) 路由文件設(shè)置的時候把參數(shù)拼到 url 里。
url：http://localhost:8081/#/paramsPassingByRouter/paramsMode/20180101/%E5%BC%A0%E4%B8%89/z3/18
缺點(diǎn)：同上。
1 和 2 結(jié)合使用：this.$router.push({ name: "模塊名稱", params: { // 各參數(shù) }, query: { // 各參數(shù) } })。
老老實(shí)實(shí)的用 localStorage 存儲。
url: http://localhost:8081/#/paramsPassingByRouter/paramsMode/z3
可以與 params 和 query 方式配合使用，可以暴露的參數(shù)顯示在 url 上，同時刷新參數(shù)也不會丟失。
銷毀頁面的時候把 localStorage 存儲的內(nèi)容清除。
// router.js
{
path: "paramsMode/:aka",
name: "paramsMode",
component: ParamsMode
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/105429.html
摘要：使用和組合傳參路由配置獲取參數(shù)刷新參數(shù)丟失顯示注意此方法第一次跳轉(zhuǎn)是沒有問題的，參數(shù)也可以傳過去，但是刷新頁面后，參數(shù)就沒了這個地方其實(shí)還有一個問題，當(dāng)你傳遞的參數(shù)是類型，第一次是沒有問題的，獲取的時候也是類型，但是當(dāng)你刷新頁面后，變成類 1. 使用name和params組合傳參 this.$router.push({name: details, params: {id: 233}})...
摘要：使用和組合傳參路由配置獲取參數(shù)刷新參數(shù)丟失顯示注意此方法第一次跳轉(zhuǎn)是沒有問題的，參數(shù)也可以傳過去，但是刷新頁面后，參數(shù)就沒了這個地方其實(shí)還有一個問題，當(dāng)你傳遞的參數(shù)是類型，第一次是沒有問題的，獲取的時候也是類型，但是當(dāng)你刷新頁面后，變成類 1. 使用name和params組合傳參 this.$router.push({name: details, params: {id: 233}})...
vue 頭條 demo 寫在前面 總結(jié)一下寫 demo 過程中 遇到的一些問題，方便自己的學(xué)習(xí)總結(jié)！如有錯誤，還請指正！ 一直想學(xué)習(xí)使用 vue ，并準(zhǔn)備以后在實(shí)際項(xiàng)目使用，之前跟著慕課網(wǎng) 黃軼 老師 敲了一下 餓了么商品購買頁的demoele效果預(yù)覽 該 demo 借鑒自 hcy1996-github 這個項(xiàng)目，但內(nèi)部內(nèi)容，布局風(fēng)格，完全不同，只為共同學(xué)習(xí)，共同交流 數(shù)據(jù)接口 直接打開 今日...
摘要：載入前后在階段，實(shí)例的和都初始化了，但還是掛載之前為虛擬的節(jié)點(diǎn)，還未替換。類似于，不同在于提交的是，而不是直接變更狀態(tài)可以包含任意異步操作。 vue基礎(chǔ) 1、 router 路由與 a 標(biāo)簽的區(qū)別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理： 答：VUE實(shí)現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個...
摘要：載入前后在階段，實(shí)例的和都初始化了，但還是掛載之前為虛擬的節(jié)點(diǎn)，還未替換。類似于，不同在于提交的是，而不是直接變更狀態(tài)可以包含任意異步操作。 vue基礎(chǔ) 1、 router 路由與 a 標(biāo)簽的區(qū)別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理： 答：VUE實(shí)現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個...
閱讀 2319·2021-10-09 09:41
閱讀 3498·2021-09-13 10:34
閱讀 1992·2019-08-30 12:59
閱讀 617·2019-08-29 17:27
閱讀 1125·2019-08-29 16:07
閱讀 3025·2019-08-29 13:15
閱讀 1378·2019-08-29 13:14
閱讀 1634·2019-08-26 12:18
