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

Question

我正在开发一个Vue.js应用程序,我很难将一个锚链接到一个组件中的某个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并且我尝试使用历史模式(没有hashbang的URL)但是cannot GET '/page'在刷新页面时它给我一个错误.

难道我做错了什么？我该怎么办？

Answer 1

因为您在散列模式下使用路由器,所以您无法轻松滚动它,因为滚动到/#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);
  }
}

这个怎么运作:

1. 将references through ref属性设置为您要滚动到的元素;
2. 编写一个以编程方式设置window.scrollY为top引用元素的函数.
3. 工作完成:)

更新1:

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

更新2:

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

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

Answer 2

另一种方法是使用“scrollIntoView()”

因此，euvl 的代码仍然有效，除非您稍微更改方法：

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

如果您想花哨并使滚动平滑，您甚至可以添加以下内容：

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

请注意，这将需要旧浏览器的 polyfill。

Answer 3

什么对我有用

<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 }
        }
  }