vue.js - Vue路由器导航或滚动到锚点(#锚点)
问题描述
我正在努力vue-router
不滚动/导航到锚标签(例如:)#anchor
。我在 Stack Overflow 上阅读了各种解决方案,但到目前为止都没有。
请在下面找到我现在正在使用的代码,该代码不起作用:
main.js
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: "/docs/1.0/:title",
component: Content,
name: "docs"
}
],
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
}
if (to.hash) {
return { selector: to.hash };
}
return { x: 0, y: 0 };
},
});
Content.vue(父组件)
<template>
<base-section
v-for="entry in $store.state.entries"
:key="entry.title"
lang="lang-markup"
:title="entry.title"
>
<template v-slot:sectionId>
<div :id="slugify(entry.title)"></div>
</template>
<template v-if="entry.content" v-slot:content>
<span v-html="entry.content"></span>
</template>
<template v-slot:examples>
<div v-html="entry.examples"></div>
</template>
<template v-slot:code>
{{ entry.code }}
</template>
</base-section>
</template>
SectionMenu.vue(子组件)
<span v-for="item in $store.state.entries" :key="item.title">
<router-link
:to="{name:'docs', hash:'#'+slugify(item.title)}"
class="mx-1 btn btn-primary"
>{{ item.title }}</router-link>
</span>
我也尝试了不同的方法,但它也没有奏效。这是方法:
<button @click.prevent="navigate(item.title)">{{item.title}}</button>
navigate(route){
this.$router.push({name:'docs', hash:'#'+this.slugify(route)})
},
你知道我做错了什么吗?
PS:我使用的是 VUE 3(vue CLI 4.5.8)
解决方案
推荐阅读
- php - 解析错误:语法错误,意外的 '200' (T_LNUMBER),需要 ',' 或 ';' 在php中
- angular - 如何在不使用角度6中的选择器的情况下传递数据
- c++ - c++ 运算符重载问题
- javascript - Bootstrap 列布局更改时如何删除最大高度/溢出属性
- python-3.x - 酸洗后无法绑定功能 - tkinter
- css - 带有 webpack 样式加载器的 Chrome 扩展找不到样式目标
- c# - 对象引用未设置为对象实例,通过代码生成 win 表单控件
- android - Android spinner, OnItemSelectedListener 选择同一项时不调用?
- python - 如何正确计算加密货币价格的 BBP(布林带百分比)?
- zxing - zxing 和 Aforge aztec 条码读取