Vue爬坑之旅：vue单页面中锚点跳转

Posted 2021-03-18 linfblog

一般情况下我们在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);
   }
}