在值更改监视器中通过$router.push导航时，Vue scrollBehavior不起作用

Question

当我通过routerLink或$router.push导航到另一个页面时，scrollBehavior工作正常。但是，当我尝试通过更改位于主页中心的输入框的输入值触发的观察器导航到同一页面时，scrollBehavior不起作用。相反，它获取新导航页面底部的位置。即使我不使用scrollBehavior，它也是一样的。

现在我的问题是，如何通过输入值更改监视器到达导航的“关于”页面的顶部？

HeadSearch组件：

<template>
  <div class="search">
    <input type="text" v-model="tx" />
    <p>{{ tx }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tx: "",
    };
  },
  watch: {
    tx() {
      if (this.$route.path !== "/about") {
        this.$router.replace("/about");
      }
    },
  },
};
</script>

App.vue：

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
      <br /><br />
      <head-search></head-search>
      <br /><br />
    </div>
    <router-view />
  </div>
</template>

<script>
import HeadSearch from "./components/HeadSearch.vue";
export default {
  components: {
    HeadSearch,
  },
};
</script>

Home.vue：

<template>
  <div class="home">
    <h1>This is Home page</h1>
    <br /><br /><br />
    <input class="home-input" type="text" v-model="hTx" />
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      hTx: "",
    };
  },
  watch: {
    hTx() {
      if (this.$route.path !== "/about") {
        this.$router.push("/about");
      }
    },
  },
};
</script>

About.vue：

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <br /><br /><br /><br /><br />
    <div v-for="(cont, index) in 30" :key="index">
      {{ cont }} {{ index }}
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
</template>

router.js：

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
  scrollBehavior(){
    return {
      x: 0,
      y: 0
    }
  }
})

Answer 1

您可以在scrollTop中使用Javascript或定义scrollTop或jQuery关于组件方法，并调用中的方法关于组件的挂载<>e211挂钩。

使用Javascript或jQuery，您可以定义一个id、类或元素，以便在挂载关于组件时滚动到该元素。

例如id="scrollTarget"

<template>
    <div class="about" id="scrollTarget">
        <h1>This is an about page</h1>
        <br /><br /><br /><br /><br />
        <div v-for="(cont, index) in 30" :key="index">
            {{ cont }} {{ index }}
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
    </div>
</template>


<script>
export default {
    methods: {
        scrollToTop() {
            // using Javascript
            document.getElementById("scrollTo").scrollIntoView({ behavior: "smooth" })
            // OR
            // using jQuery
            $("html, body").animate({scrollTop: 600}, "slow")
        }
    },
    mounted() {
        this.scrollToTop();
    }
}
</script>