Vue爬坑之旅（八）：vue單頁面中錨點跳轉

一般情況下我們在html中使用錨點時會利用鏈接方式請求‘#+id名稱’，此時會在url后面跟一個#號。但是在單頁面中會有路由誤判的情況。所以在單頁面中錨點可改為參數傳遞的方式。

一、封裝一個外部js：anchor.js

//錨點跳轉
function goAnchor(selector) {
    var anchor = this.$el.querySelector(selector);//獲取元素
    if(anchor) {
        setTimeout(()=>{//頁面沒有渲染完成時是無法滾動的，因此設置延遲
            anchor.scrollIntoView(); //js的內置方法，可滾動視圖位置至元素位置
        },500);
    } 
};
//獲取參數
function GetQueryString(name){
     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);
     if(r!=null)return  unescape(r[2]); return null;
}
 
export {
    goAnchor,
    GetQueryString
}

二、在需要使用錨點的頁面引入js

import { goAnchor, GetQueryString } from '../js/anchor';
 
methods:{
   goAnchor,
   GetQueryString,
          
},
mounted(){
   let maodian=this.GetQueryString('anchor');//進入頁面，如果帶有錨點參數，則跳轉至錨點地方，參數值就是id名
   if(maodian){
        console.log(maodian);
        this.goAnchor('#'+maodian);
   }
}