vue如何设置描点跳转到对应页面
作者：沐卿゚
这篇文章主要介绍了vue如何设置描点跳转到对应页面问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue设置描点跳转到对应页面
<div id="app"> <a href="#target" rel="external nofollow" >点击跳转到某个位置</a> <div class="spacer"></div> <!-- 这里添加一些空间以展示效果 --> <div id="target">目标位置</div> </div>
vue锚点跳转到对应位置（精确定位）
安装：
npm install --save vue-scrollto
main.js引入
import Vue from 'vue'
var VueScrollTo = require('vue-scrollto');
Vue.use(VueScrollTo)页面引用：
<template>
<div class="scrollDemo">
<div class="demoNav flex-center-center">
<div
class="demoNavItem"
v-for="(item,index) in demoNavItem"
:key="index"
:class="{navActive : idx==index}"
@click="changNav(index)"
>{{item}}</div>
</div>
<div class="demoContent">
<!-- 如果内容为循环，id则定义为:id="'demoItem'+index" -->
<div class="demoItem0 demoItem" id="demoItem0">谷歌浏览器内容</div>
<div class="demoItem1 demoItem" id="demoItem1">uc浏览器内容</div>
<div class="demoItem2 demoItem" id="demoItem2">IE浏览器内容</div>
<div class="demoItem3 demoItem" id="demoItem3">火狐浏览器内容</div>
<div class="demoItem4 demoItem" id="demoItem4">360浏览器内容</div>
<div class="demoItem5 demoItem" id="demoItem5">猎豹浏览器内容</div>
</div>
</div>
</template><script>
// 引入
var VueScrollTo = require("vue-scrollto");
export default {
data() {
return {
idx: 0,
demoNavItem: [
"谷歌浏览器",
"uc浏览器",
"IE浏览器",
"火狐浏览器",
"360浏览器",
"猎豹浏览器",
],
};
},
methods: {
// 导航选中效果
changNav(index) {
this.idx = index;
VueScrollTo.scrollTo(document.getElementById("demoItem" + index), 1000, {
offset: -50,
});
},
},
};
</script><style scoped>
.flex-center-center {
display: flex;
align-items: center;
justify-content: center;
}
.demoNav {
width: 100%;
height: 70px;
background: rgba(0, 31, 144, 1);
position: sticky;
left: 0;
top: 0;
}
.demoNavItem {
font-size: 40px;
color: #fff;
margin-left: 30px;
cursor: pointer;
}
.navActive {
color: red;
}
.demoItem {
width: 100%;
height: 600px;
font-size: 60px;
color: #fff;
text-align: center;
padding: 60px 0 0 0;
}
.demoItem0{
background: gold;
}
.demoItem1 {
background: red;
}
.demoItem2 {
background: chartreuse;
}
.demoItem3 {
background: cornflowerblue;
}
.demoItem4 {
background: cyan;
}
.demoItem5 {
background: darkmagenta;
}
</style>效果图：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。