问题:Vue路由器:锚链接到页面中的特定位置,例如/路线/#锚点

有没有一种既定的方法可以使用 vue-router (router-link) 链接到特定的路由,包括页面上的锚点?

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

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

解答

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>