Question

使用Vue，我有一个主页，可以说它包含两个组件。

简介组件列表组件

我想在Intro组件中有一个按钮，该按钮将用户从页面上跳到List组件。现在，通常我会做类似的事情-

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

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

但是，由于某种原因，它不起作用，我相信这可能是因为我在技术上在两个组件之间进行了跳转，即使它们位于同一页面上（“ CLICK HERE ...”位于其中，而。 ..要跳到这里就在另一边）

我是否纠正这个问题？如果可以，是否有办法解决此问题？

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>

在单独的组件中进一步跳至该页面

1 个答案: