在當前頁面中，選中了某個標簽中的問題，然后跳轉到問題頁面，按回傳按鈕回傳到當前頁面，繼續選中之前的選中標簽
實作效果如下圖：
實作邏輯如下：
- 進入當前頁面的時候，頁面路由為
http://localhost:8080/#/problem - 點擊某個標簽，頁面路徑修改為
http://localhost:8080/#/problem?index=3 - index的值為選中的標簽下標，這樣就用當前路由記錄了當前的標簽選中項
- 進入詳情頁后，路由為
http://localhost:8080/#/detail/?id=57 - 回傳上級頁面，頁面路由為
http://localhost:8080/#/problem?index=3 - 在頁面渲染的時候，獲取路由的引數，獲取到
index的值為3 - 然后就將標簽的選中項，設定為下標為
3的標簽， - 同時請求下標為
3的標簽項對應的問題內容，填充到右側
代碼如下：
給頁面路由添加index內容
//在點擊標簽的時候呼叫
this.$router.replace({
query: {
...this.$route.query,
index: index
}
})
// 判斷路由中是否有index
if (this.$route.query.index) {
// 走選中之前頁面選中項的邏輯
let index = this.$route.query.index
// 設定標簽的默認選中項
this.activeKey = index
// 獲取選中項的右側問題內容
let typeId = this.questionHeadData[index].typeId
this.oneId = typeId
this.getQuestionMore(typeId)
} else {
// 走正常的頁面渲染邏輯
const typeId = this.questionHeadData[0].typeId
this.oneId = typeId
// 請求右側資料
this.getQuestionMore(typeId)
}
以上就是整個實作默認選中之前選中項的邏輯，如果疑問，歡迎評論區留言，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/224031.html
標籤：其他
上一篇：【實用教程】網課視頻自動播放代碼