router-view視圖傳值與頁面刷新問題
問題由來：
寫一個(gè)問卷調(diào)查的頁面，在頁面右側(cè)采用了router-view使頁面內(nèi)容更新，
但在使用router-link進(jìn)行傳值時(shí)嫩与，因?yàn)轫撁嬖诘谝淮嗡⑿聲r(shí)就要從父組件
中獲取值且傳的值是數(shù)組晓避，而導(dǎo)致因?yàn)轫撁嫠⑿露鴮?dǎo)致的參數(shù)傳遞過去
獲取不到內(nèi)部數(shù)據(jù)。
最后的效果圖
a-1-1.PNG
router-view的視圖區(qū)域
a-1-2.PNG
錯(cuò)誤寫法
傳遞參數(shù)
<li class="choice">
<router-link tag='div' :to="{name: 'Surface', query: {database: Data}}">學(xué)生評教</router-link>
</li>
Data為一個(gè)數(shù)組
接受參數(shù)
Data: this.$route.query.database,
視圖頁面渲染
<ul>
<li
v-for="item in Data"
:key="item.id"
:style="item.color"
@click="handleClickClass()"
>
<h5>授課教師：{{item.teacher}}</h5>
<p class="classInfo">科目：{{item.subject}}</p>
<p class="classInfo">班級：{{item.classify}}</p>
</li>
</ul>
控制臺報(bào)錯(cuò)
a-1-3.PNG
傳給視圖的參數(shù)格式不對乙帮，數(shù)據(jù)無法渲染杜漠，因此頁面如下
a-1-6.PNG
既然數(shù)據(jù)格式不對，自然要轉(zhuǎn)換數(shù)據(jù)格式
傳遞參數(shù)
created () {
this.formatChange()
},
methods: {
formatChange () {
this.classify = JSON.stringify(this.Data)
}
},
<li class="choice">
<router-link tag='div' :to="{name: 'Surface', query: {database: classify}}">學(xué)生評教</router-link>
</li>
將數(shù)組轉(zhuǎn)換為字符串察净，這樣才能傳遞給router-view視圖在刷新頁面時(shí)
接受參數(shù)
mounted () {
this.classify()
this.above()
},
methods: {
classify () {
this.Data = JSON.parse(this.$route.query.database)
},
above () {
for (let i = 0; i < this.Data.length; i++) {
let n = i % 7
this.Data[i].color = this.bgColor[n].color
}
}
}
將傳遞過來的數(shù)據(jù)轉(zhuǎn)換為數(shù)組驾茴，用于數(shù)據(jù)的渲染，成功之后進(jìn)入該頁面即刷新時(shí)氢卡，數(shù)據(jù)渲染成功锈至。
a-1-1.PNG
解決思路：
主要問題出現(xiàn)在頁面刷新時(shí)對參數(shù)傳遞的影響，在這里便通過數(shù)據(jù)類型轉(zhuǎn)換繞開該問題
JSON.stringify()
JSON.parse()
query和params區(qū)別
query要用path引入路徑译秦，params要用name引入路徑峡捡，
發(fā)送數(shù)據(jù)
this.$router.push({
name: 'detail',
params: {
data: '這是傳輸?shù)臄?shù)據(jù)'
}
})
this.$router.push({
path: '/detail',
query: {
data: '這是傳輸?shù)臄?shù)據(jù)'
}
})
接受數(shù)據(jù)
this.$route.params.data
this.$route.query.data
query傳輸數(shù)據(jù)時(shí)，傳輸?shù)臄?shù)據(jù)會顯示在地址欄筑悴，而params不會们拙。
