#vue.js #vue-router #vuejs3
#vue.js #vue-маршрутизатор #vuejs3
Вопрос:
Я борюсь с vue-router
тем, чтобы не прокручивать / не переходить к тегам привязки (например: #anchor
). Я прочитал различные решения здесь о переполнении стека, но пока ни одно из них не сработало.
Пожалуйста, найдите ниже код, который я использую прямо сейчас, который не работает:
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)
Ответ №1:
В Vue Router 4 формат возвращаемого объекта scrollBehavior()
изменился по сравнению с тем, что было в Vue Router 3. В частности, свойство объекта selector
теперь имеет имя el
, как показано в документации:
const router = createRouter({
scrollBehavior(to, from, savedPosition) {
if (to.hash) {
// BEFORE:
// return { selector: to.hash }
return { el: to.hash }
}
},
})