gpt4 book ai didi

vue.js - Vue 路由器 : anchor links to a specific place in a page e. g./route/#anchor

转载 作者:搜寻专家 更新时间:2023-10-30 22:50:51 25 4
gpt4 key购买 nike

是否有使用 vue-router(router-link)链接到特定路由的既定方法,包括页面上的 anchor ?

我可以这样做:<router-link to="/page/#section">并且路由器将按预期工作,但前提是我在实际的/page/位置上——它会滚动到最近的 id="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。设置 anchor ID(很可能在您的 Home.vue 中):

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

4.通过 hrefrouter-link 链接到 anchor :

通过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.js - Vue 路由器 : anchor links to a specific place in a page e. g./route/#anchor,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51516318/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com