How to load page with scroll to specific id on Nuxt/Vue?

Question

Vue.js

The essence is the following, there is an application on Nuxt, there we have categories in the form of links and each leads to routes like

'/menu/pizza',
'/menu/sushi'

etc. etc.
The file responsible for this route is menu/_name.vuewhere name is the parameter id to which you want to scroll when loading the page. This is how it works for Tanuki , that is, when you click on the categories in the floating header, you get to the entire listing of products but with a scroll to a certain category.
Actually a question how to be with such task in Nuxt/Vue????? I tried to process $route.params.name when created (naturally with if (process.client)) writes they say scrollInToView is not found, although my content is loaded in asyncData, mounted has the same story, but scrolls with varying success. Please help...

Answer 1

I solved this problem in the following way, we make the router.scrollBehavior.js file in @/app/
Then I check where the router leads, if it’s up to the route I need, then I return the object with the selector that we passed to the route params as position.
@/app/router.scrollBehavior.js

export default function(to, from, savedPosition) {
  const toName = to.params.name

  if (to.name === 'menu-name') {
    let position = { selector: `#${ toName }` }

    return position
  }
}

UPD: https://nuxtjs.org/docs/2.x/configuration-glossary...

Answer 2

If I understand the task correctly, try mounted on the event

this.$nextTick(function () {
        //To do
      })

Answer 3

Possible without a router
https://codesandbox.io/s/beautiful-merkle-csici