在单独的组件中进一步向下跳转页面

Question

使用Vue，我有一个主页，假设它由两个组件组成。

简介组件列表组件

我想在Intro组件中有一个按钮，它将用户从页面跳转到列表组件。现在，通常我会这样做-

<a href="#identifier">CLICK HERE...</a>

<div id="identifier">...TO JUMP HERE</div>   

但是，由于某些原因，它不工作，我相信这可能是因为我在技术上在两个组件之间跳转，即使它们在同一个页面上(单击此处...在一个上，这里的...TO跳转在另一个上)

我说的是问题所在，对吗？如果是这样，有没有办法解决这个问题？

Answer 1

在下面的示例中，这与预期的一样。

​

Vue.component('intro', {
  template: `
    <section>
      <h2>Intro component!</h2>
      <a href="#list">Goto list anchor</a>
    </section>
  `
})

Vue.component('list', {
  template: `
    <section id="list">
      <h2>List component</h2>
      <h3>This is a long list:</h3>
      <ul>
        <li v-for="i in 500">list item {{i}}</li>
      </ul>
    </section>
  `
})

new Vue({
  el: "#app",
})

Vue.config.devtools = Vue.config.productionTip = false

h2 {
  color: salmon;
  background-color: lavender;
  padding: 10px 0;

}
#list {
  margin-top: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<main id="app">
  <intro></intro>
  <list></list>
</main>

​