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

 

 

Logo

前往低代码交流专区

更多推荐