第一种：

router.js中添加

mode: 'history', srcollBehavior(to,from,savedPosition){ if(to.hash){ return { selector:to.hash } } }

组件：

<template><div><ul class="list"><li><a href="#1" rel="external nofollow" >星期1</a></li><li><a href="#2" rel="external nofollow" >星期2</a></li><li><a href="#3" rel="external nofollow" >星期3</a></li><li><a href="#4" rel="external nofollow" >星期4</a></li><li><a href="#5" rel="external nofollow" >星期5</a></li><li><a href="#6" rel="external nofollow" >星期6</a></li><li><a href="#7" rel="external nofollow" >星期7</a></li></ul><div class="main_con" id="1">11111111111111111111111111111111</div><div class="main_con" id="2">22222222222222222222222222222222222</div><div class="main_con" id="3">33333333333333333333333333333333333333</div><div class="main_con" id="4">444444444444444444444444444444444444444</div><div class="main_con" id="5">555555555555555555555555555555555555555</div><div class="main_con" id="6">666666666666666666666666666666666666666</div><div class="main_con" id="7">7777777777777777777777777777777777777777</div></div></template><script>export default {data(){return {}}}</script><style>.list{width: 100%;height: 50px;}li{width: 11%;height: 50px;line-height: 50px;text-align: center;border: 1px solid #ccc;color: #ff6c00;float: left;list-style: none!important;}.main_con{width: 100%;height: 200px;border: 1px solid #ccc;line-height: 200px;text-align: center;color: blue;}</style>

第二种：

写一个方法 组件

<template> <div> <div><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" @click="goAnchor('#anchor-'+index)" v-for="index in 20"> {{index}} </a></div> <div :id="'anchor-'+index" class="item" v-for="index in 20">{{index}}</div></div> </template><script>export default{data(){return {}},methods: { goAnchor(selector) { var anchor = this.$el.querySelector(selector) document.documentElement.scrollTop = anchor.offsetTop } }}</script><style>.item{width: 100%;height: 200px;line-height: 200px;text-align: center;}</style>

第三种： 自定义指令

<template><div> <div><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" v-anchor="index" v-for="index in 20"> {{index}} </a></div> <div :id="'anchor-'+index" class="item" v-for="index in 20" >{{index}}</div></div></template><script>export default{data(){return {}}}</script><style>.item{width: 100%;height: 200px;line-height: 200px;text-align: center;}</style>

main.js 定义全局指令 方便其他地方复用

Vue.directive('anchor',{inserted : function(el,binding){el.onclick = function(){ document.documentElement.scrollTop = $('#anchor-'+binding.value).offset().top}}})

总结

以上所述是小编给大家介绍的vue中锚点的三种方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！