我正在开发Vue.js应用程序，我很难将锚点链接到组件中的某个div.
我有以下主播:
<a href="#porto" class="porto-button">Porto, Portugal</a>
以及以下部门:
<div id="porto" class="fl-porto">
我在哈希模式下使用vue路由.
每当"问题"出现时，我都会点击"主页"按钮
我在用Vue.js 1.我和Xtry 使用历史记录模式(URL不带hashbang)，但刷新页面时会出现cannot GET '/page'个错误.
我做错什么了吗？我能怎么办？
因为你在哈希模式下使用路由，你将无法轻松滚动，因为滚动到/#something实际上会将你重定向到"某物"页面.
您必须自己模拟滚动行为，try 这样做:
//P.S. the code is written for Vue 2.
//You will have to adjust it to Vue 1.
//Your view:
<a class="porto-button" @click="scrollMeTo('porto')">Porto, Portugal</a>
...
<div ref="porto" class="fl-porto">
//Your code:
methods: {
scrollMeTo(refName) {
var element = this.$refs[refName];
var top = element.offsetTop;
window.scrollTo(0, top);
}
}
工作原理:
ref属性设置为要滚动到的元素；window.scrollY设置为引用元素的top.Update 1:
JSFIDLE https://jsfiddle.net/5k4ptmqg/4/
Update 2:
似乎在Vue 1 ref="name"中看起来像el:name (docs)，下面是一个更新的示例: