Как загрузить страницу со скроллом на определнный id на Nuxt/Vue?

Question

[dicem]

Суть следующая, есть приложение на Nuxt, там нас есть категории в виде ссылок и каждая ведет на роуты типа

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

итд итп
Файлом отвечающим за этот роут является menu/_name.vue где name - параметр идентификатор id до которого нужно проскролить при загрузке страницы. Таким образом работает у Тануки, то ест ькогда вы кликаете по категориям в плавающем хедере вы попадаете на весь листинг товаров но со скроллом до определенной категории.
Собственно вопрос, как быть с такой задачей в Nuxt/Vue????? Пробовал при created обрабатывать $route.params.name (естественно с if (proccess.client)) пишет мол scrollInToView не найден, хотя у меня контент загружается в asyncData, в mounted такая же история, но с переменным успехом доскролливает. Прошу помощи...

Answer 1

[dicem]

Решил эту проблему следующим способом, делаем в @/app/ файл router.scrollBehavior.js

Далее там проверяю куда ведет роутер, если до нужного мне роута, то возвращаю в качестве position объект с селектором который мы передали в params роута.
@/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

[no_one_safe]

Если я правильно понял задачу, попробуй в mounted на событии

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

Comments

[dicem]

Спасибо за ответ, но не сработает( некст тик сработает до рендера, и nuxt опять выдаст ошибку

Answer 3

[Алексей Ярков]

Можно без роутера
https://codesandbox.io/s/beautiful-merkle-csici