溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了vue跳轉后頁面置頂的問題怎么解決的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇vue跳轉后頁面置頂的問題怎么解決文章都會有所收獲，下面我們一起來看看吧。
今天測試指出我的項目跳轉頁面時未置頂，嗯，這個太影響用戶體驗了。
但是辦法總會有噠！No Problem!
只需在路徑上匹配一段關于scroll方法即可，
我簡單截取一段我的代碼以作演示：
或者使用這段代碼：
afterEach (to, from, next) {
window.scrollTo(0, 0)
}但是還有個問題依舊沒有徹底克服！
比如，如果當前頁面是首頁，點擊頁面中的"首頁"選項后，卻依然不置頂，那么只能老老實實的增加個回到頂部了。
toYpWebsite () {
// this.$router.push('/ypWebsite')
document.body.scrollTop = document.documentElement.scrollTop = 0
},即
document.body.scrollTop = document.documentElement.scrollTop = 0
這兩條就可以解決關于頁面置頂的問題，哈哈，測試沒轍了！
new.json 數據代碼：
[
{"id": "G11111","title": "手機","price": 2999},
{"id": "G22222","title": "平板電腦","price": 1999},
{"id": "G33333","title": "筆記本電腦","price": 5999},
{"id": "G44444","title": "樹莓派電腦","price": 999},
{"id": "G55555","title": "超級計算機","price": 9999999}
]具體代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script> </head> <body> <div id="app"> <ul > <li v-for="(pr,index) in info" :key="index">{{ pr.id }} {{pr.title}} ￥{{pr.price}} <button @click="aaa(pr,index)">{{hello}}</button> </li> </ul> </div> <script type = "text/javascript"> new Vue({ el: '#app', data () { return { info: null, hello:"置頂", new:"new.json" } }, mounted () { axios.get(this.new) .then(response => { this.info = response.data; console.log(response.data); for (let i=0;i<this.info.length;i++){ console.log(this.info[i].title); if (this.info[i].id == "G33333" || this.info[i].id == "G44444"){ this.info.unshift(this.info[i]); //把查找到的數據復制添加到數組的首位 this.info.splice(i+1,1); //數據復制添加到數組的首位后，原本查找的數據位置會發生改變，所以要往后加一位（i+1）,然后刪除它 } } }) .catch(error=> { console.log(error); console.log("%c404:"+this.new+"數據請求失敗！！！", "color:red;font-size:30px;"); }) }, methods:{ aaa:function (pr,index) { this.info.splice(index,1); this.info.unshift(pr); } } }) </script> </body> </html>
效果圖如下：
關于“vue跳轉后頁面置頂的問題怎么解決”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“vue跳轉后頁面置頂的問題怎么解決”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
