1.template
//导航栏部分
<ul @click="onToAnchor">
<li>
<router-link to="#MagnifyGlass">MagnifyGlass</router-link>
</li>
<li>
<router-link to="#LouveredDoor">LouveredDoor</router-link>
</li>
</ul>
//视窗部分
<main ref="ShowContainer" >
设置视窗
<div id='1'></div>
<div id='2'></div>
<div id='3'></div>
</main>
2.methods
mounted(){
this.onToAnchor();
},
methods: {
onToAnchor() {
const showContainer: any = this.$refs.ShowContainer;
const target = showContainer.querySelector(this.$route.hash);
target.scrollIntoView({
behavior: 'smooth'//平滑滚动
});
}
},