vue项目hash路由锚点定位失效问题

前言

今天在访问之前写的VUE项目时，出现了一些bug，锚点链接不能使用（会直接跳链接，之前做项目的时候还是没有问题的），后来通过百度大大的问候，知道了问题所在，总结就是在vue路由hash模式中，#被占用，<a>标签的锚点跳转失效。

解决方法

element.scrollTo()

• 适用于准确知道内部锚点元素位置
• 使用方法

element.scrollTo({
  top: 100,  //向上滚动的距离
  left: 100,  //向左滚动的距离
  behavior: 'smooth'  //方式支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值 auto
});

element.scrollIntoView()

• 适用于不知道元素在哪个位置
• 接口的scrollIntoView()方法会滚动元素的父容器，使被调用scrollIntoView()的元素对用户可见。
• 使用方法

element.scrollIntoView({
	behavior:"smooth"
	//定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"。
	block:"start"
	//定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"。
	inline:"nearest"
	//定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
});

• 使用样例

使用history路由模式

• 直接解决bug