Блог

Я борюсь с 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)

В 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 }
    }
  },
})
 

ДЕМОНСТРАЦИЯ