Vue从一个页面跳转到另一个页面指定位置(跨页面锚点定位))

从A页面跳转到B页面的boxCenter位置

1. B页面,在需要跳转到的指定位置添加id名(eg: id=‘boxCenter’)在这里插入图片描述
2. A页面,添加点击方法

第一个参数为B页面路由地址,第二个参数为要跳转到的位置在这里插入图片描述

3. A页面下toguid方法
methods:{	
	toguid(path,id){
		var path=path
		var Id=id;
		localStorage.setItem('toId',Id);
		this.$router.push(path);
	}
}
4. B页面
created() {
	this.$nextTick(()=>{this.toLocal()})
},
mounted() {
	let _this=this;
	_this.$nextTick(function(){
			window.addEventListener('scroll',_this.handleScroll)
	})			
},
methods: {
	toLocal(){
		//查找存储的锚点id
		let Id=localStorage.getItem('toId');
		let toElement=document.getElementById(Id);
		//锚点存在跳转
		if(Id){
			toElement.scrollIntoView()
		}
	}
}
//用完后记得将存储的锚点置空,否则会影响其他页面跳转到当前页面
destroyed() {
	localStorage.setItem('toId','');
}
			
Logo

前往低代码交流专区

更多推荐