Vue路由器：锚链接到页面中的特定位置，例如/路线/#锚点答案

【问题标题】：Vue router: anchor links to a specific place in a page e.g. /route/#anchorVue路由器：锚链接到页面中的特定位置，例如/路线/#锚点
【发布时间】：2019-01-02 02:53:50
【问题描述】：

有没有既定的方式使用 vue-router (router-link) 链接到特定的路由，包括页面上的锚点？

我可以这样做：<router-link to="/page/#section"> 并且路由器将按预期工作，但前提是我在实际的 /page/ 位置 - 它会滚动到最近的 id="section" 元素

但如果我从其他地方（例如 /page2/）使用相同的 router-link，路由器将返回 404，因为它将 /#section 部分视为嵌套路由。

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

以下是指向不同页面锚点的路由器链接的解决方案：

使用此链接语法：<router-link to="/page#section">。在目标页面上，您需要添加自己的滚动逻辑：

        mounted() {
            var section=this.$router.currentRoute.value.hash.replace("#", "");
            if (section)
                this.$nextTick(()=> window.document.getElementById(section).scrollIntoView());
        },

这很好用，但您可能需要为不存在的锚点添加一些错误处理。

【讨论】：

【解决方案2】：

1。安装vue-scrollto：

npm install --save vue-scrollto

2。设置main.js:

import VueScrollTo from 'vue-scrollto'
Vue.use(VueScrollTo)

3。设置锚点 ID（很可能在您的 Home.vue 中）：

<template>
    <v-content>
      <SectionOne id="section-one"/>
      <SectionTwo id="section-two"/>
      <SectionThree id="section-three"/>
    </v-content>
</template>

4。通过href 或router-link 链接到锚点：

通过href:

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

通过router-link:

<router-link to="#" v-scroll-to="'#section-two'">
    Scroll to #section-two
</router-link>

【讨论】：

我不明白这如何解决 OP 的问题。 v-scroll-to 似乎只在当前页面上工作。我在指向不同页面的路由器链接中尝试过它并没有滚动
如何解决路由器链接到不同页面的问题，我在第 2 页，我使用 router-link 但它不会将我发送到我用 v-scroll-to 定义的部分.他真的能解决吗？如何解决？

【解决方案3】：

vue-router 文档中有一个示例，他们在其中模拟“滚动到锚点”行为：https://router.vuejs.org/guide/advanced/scroll-behavior.html

它们链接到页面底部附近的示例： https://github.com/vuejs/vue-router/blob/dev/examples/scroll-behavior/app.js

我自己（还）没有尝试过，但似乎对他们有用。

【讨论】：