Question

是否存在使用vue-router（路由器链接）链接到特定路由的确定方法，包括页面上的锚点？

我可以这样做：<router-link to="/page/#section">，路由器将按预期工作，但仅当我在实际的/ page /位置时–它将滚动到ID =“ section”

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

Answer 1

这是路由器链接指向另一页上的锚点的解决方案：

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

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

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

Answer 2

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

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

我还没有尝试过，但是似乎对他们有用。

Answer 3

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>

Vue路由器：将链接锚定到页面中的特定位置，例如/ route /＃anchor

3 个答案: