問題
- 當(dāng)你想通過路徑參數(shù)的變化來控制近上，頁面內(nèi)容展示的時候
- 在相同的路徑中進(jìn)行跳轉(zhuǎn)，如果只是參數(shù)變化，是不會觸發(fā)頁面內(nèi)組件的刷新的
例如：<router-link :to="'/home/params/'+sun+'/123'"> 地址欄傳值 </router-link>
解決方案
1.監(jiān)聽當(dāng)前路徑的$route對象沮脖，當(dāng)該對象變化時手動觸發(fā)數(shù)據(jù)更新
watch:{
$route(){
this.getData(); //當(dāng)對象改變，執(zhí)行操作獲取新數(shù)據(jù)
}
}
- 給視圖
<router-view>添加key屬性，把它的值設(shè)置為動態(tài)隨機(jī)數(shù)（例如New Date()）勺届，這樣每次都會刷新視圖了驶俊。
<router-view :key="new Date()"></router-view>
結(jié)論
在Vue里，會默認(rèn)的考慮性能免姿，盡量的減少DOM的重新渲染饼酿。
key屬性在Vue里用的會很多，下面摘錄一段官方說明：
key 的特殊屬性主要用在 Vue 的虛擬 DOM 算法胚膊，在新舊 nodes 對比時辨識 VNodes故俐。如果不使用 key，Vue 會使用一種最大限度減少動態(tài)元素并且盡可能的嘗試修復(fù)/再利用相同類型元素的算法紊婉。使用 key药版，它會基于 key 的變化重新排列元素順序，并且會移除 key 不存在的元素肩榕。
在Vue的列表渲染里刚陡，可以通過給<li>標(biāo)簽綁定:key屬性來使列表進(jìn)行強(qiáng)行重新渲染，這樣即使每一項的內(nèi)容并沒有改變也可以觸發(fā)DOM的重新排列株汉。
遇到的問題：
[vue-router] missing param for named route "infiniteScroll": Expected "id" to be defined
翻譯：[vue router]命名路由“infiniteScroll”缺少參數(shù)：應(yīng)定義“id”
// 1.定義的路由是.
{path:'/home/newsinfo/:id' ,name: 'newsinfo' , component:newsinfo }
//跳轉(zhuǎn)的地址：
this.$router.push({
name: newsinfo,
});
解析：因為在路由重定義是接收了參數(shù)筐乳，但是在跳轉(zhuǎn)的時候沒有傳遞參數(shù)的原因。只需要在跳轉(zhuǎn)的時候按照規(guī)定添加參數(shù)即可
代碼地址：碼云 vue-question 無限滾動 - 首頁面
