關(guān)于vue跳轉(zhuǎn)后頁面置頂?shù)膯栴}

更新時(shí)間：2022年05月26日 10:31:29 作者：elephant230

這篇文章主要介紹了關(guān)于vue跳轉(zhuǎn)后頁面置頂?shù)膯栴}，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue跳轉(zhuǎn)后頁面置頂

今天測試指出我的項(xiàng)目跳轉(zhuǎn)頁面時(shí)未置頂，嗯，這個(gè)太影響用戶體驗(yàn)了。

但是辦法總會有噠！No Problem!

只需在路徑上匹配一段關(guān)于scroll方法即可，

我簡單截取一段我的代碼以作演示：

或者使用這段代碼：

afterEach (to, from, next) {
    window.scrollTo(0, 0)
}

但是還有個(gè)問題依舊沒有徹底克服！

比如，如果當(dāng)前頁面是首頁，點(diǎn)擊頁面中的"首頁"選項(xiàng)后，卻依然不置頂，那么只能老老實(shí)實(shí)的增加個(gè)回到頂部了。

 toYpWebsite () {
      // this.$router.push('/ypWebsite')
      document.body.scrollTop = document.documentElement.scrollTop = 0
 },

即

document.body.scrollTop = document.documentElement.scrollTop = 0

這兩條就可以解決關(guān)于頁面置頂?shù)膯栴}，哈哈，測試沒轍了！

vue如何實(shí)現(xiàn)置頂

new.json 數(shù)據(jù)代碼：

[
  {"id": "G11111","title": "手機(jī)","price": 2999},
  {"id": "G22222","title": "平板電腦","price": 1999},
  {"id": "G33333","title": "筆記本電腦","price": 5999},
  {"id": "G44444","title": "樹莓派電腦","price": 999},
  {"id": "G55555","title": "超級計(jì)算機(jī)","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]); //把查找到的數(shù)據(jù)復(fù)制添加到數(shù)組的首位
                            this.info.splice(i+1,1); //數(shù)據(jù)復(fù)制添加到數(shù)組的首位后，原本查找的數(shù)據(jù)位置會發(fā)生改變，所以要往后加一位（i+1）,然后刪除它
                        }
                    }
                })
                .catch(error=> {
                    console.log(error);
                    console.log("%c404:"+this.new+"數(shù)據(jù)請求失?。。?！", "color:red;font-size:30px;");
                })
        },
        methods:{
            aaa:function (pr,index) {
                this.info.splice(index,1);
                this.info.unshift(pr);
            }
        }
    })
</script>
</body>
</html>

效果圖如下：