Vue.js 锚定到同一组件内的 div

Question

我正在开发一个 Vue.js 应用程序，但我无法 link 锚点到组件中的某个 div。

我有以下锚点：

<a href="#porto" class="porto-button">Porto, Portugal</a>

和以下 div：

<div id="porto" class="fl-porto">

我在散列模式下使用 vue-router。

问题是，每当我单击 "porto-button" 时，它都会将我重定向到 "home" 页面 (' / ')

我正在使用 Vue.js 1.X 我尝试使用历史模式（URL 没有 hashbang）但是它在刷新页面时给我一个 cannot GET '/page' 错误.

我是不是做错了什么？我该怎么办？

Answer 1

因为您在散列模式下使用路由器，您将无法轻松滚动，因为滚动到 /#something 实际上会将您重定向到 'something' 页面。

您将不得不自己模拟滚动行为，尝试做类似的事情：

//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。
任务完成:)

更新 1：

jsfiddle https://jsfiddle.net/5k4ptmqg/4/

更新二：

似乎在 Vue 1 中 ref="name" 看起来像 el:name (docs)，这是一个更新的示例：

https://jsfiddle.net/5y3pkoyz/2/

Answer 2

什么对我有用

<router-link to="#leaders">Leaders</router-link>

或动态

<router-link :to="`#${subMenuItem.linkTarget}`" class="page-submenu-list__link">
                    {{subMenuItem.linkTitle}}
                </router-link>

在路由器中

routes:[],
scrollBehavior (to, from, savedPosition) {
    //https://router.vuejs.org/guide/advanced/scroll-behavior.html
    if (to.hash) {
            return { selector: to.hash }
        } else if (savedPosition) {
            return savedPosition;
        } else {
            return { x: 0, y: 0 }
        }
  }

Answer 3

另一种方法是使用"scrollIntoView()"

因此，euvl 的代码仍然有效，只是您稍微更改一下方法：


    new Vue({
      el: '#app',
      methods: {
        goto(refName) {
            var element = this.$els[refName];
          element.scrollIntoView();
        }
      }
    })

如果你想让滚动更流畅，你甚至可以添加以下内容：

element.scrollIntoView({ behavior: 'smooth' });

请注意，这需要针对旧版浏览器的 polyfill。

Answer 4

另一种解决方案是使用 v-scroll-to 指令 (webpage, github)。我发现这个解决方案干净、简单、灵活且有效。使用：

安装它：
```
npm install --save vue-scrollto
```

有Vue'use'它：

var VueScrollTo = require('vue-scrollto');
Vue.use(VueScrollTo)

在您的 Vue 组件模板中将其作为指令应用：

<a href="#" v-scroll-to="'#element'">Scroll to #element</a>

<div id="element">
  Hi. I'm #element.
</div>

或者在您的 Vue 组件的方法中以编程方式应用它：
```
this.$scrollTo('#element', 500, { easing: 'ease-in-out' })
```

或者在您的 Vuex 操作中以编程方式应用它：

import { scrollTo } from 'vue-scrollto'

scrollTo('#element', 500, { easing: 'ease-in-out' })

另一个解决方案，如果你已经在使用 Vuetify，你可能更喜欢使用 Vuetify's built-in programmatic scrolling method, $vuetify.goTo():

<v-btn @click="$vuetify.goTo('#element', {duration: 500, easing: 'easeInOutCubic'})">
  Scroll to #element
</v-btn>

<div id="element">
  Hi. I'm #element.
</div>

Answer 5

如果你在一个元素上设置 ref="something"，你也可以将这个 oneliner 与 @click 一起使用：

<a @click="$refs.something.$el.scrollIntoView()">
    Go to something
</a>

Vue.js 锚定到同一组件内的 div

Vue.js anchor to div within the same component

html

vue.js

vue-router