Объедините историю API и хэши в Vue-роутере - PullRequest
0 голосов
/ 17 мая 2018

Я использую vue.js и vue-router. Я пытаюсь добиться следующего:

У меня есть верхняя панель навигации с навигационными ссылками. Некоторые из них являются ссылками на другие клиентские маршруты, поэтому они являются базовым компонентом vue-router router-link, за исключением одного, который должен указывать на компонент с таким же значением атрибута id на той же странице.

Сначала я закодировал его как элемент привязки HTML, a, со значением атрибута href, равным значению атрибута id целевого компонента. В качестве альтернативы я попытался использовать атрибут router-link с to, у которого домашний путь / объединен со значением href (id), поэтому /#target_id.

Первый путь, приведший к неудаче на маршрутах, отличных от целевого элемента, немного очевиден. Второй способ также неудачен. Он не работает даже на маршруте, который содержит целевой элемент, хотя корректно обновляет адресную строку. Он также не может достичь целевого элемента из других маршрутов, которые не содержат целевой элемент, заканчиваясь только на маршруте с целевым элементом в верхней части страницы.

Как указать vue-router не только достичь маршрута и отрендерить соответствующий компонент, но также следовать частям хеша и достичь нужного региона на странице?

Возможно, я могу условно отобразить навигационные ссылки как anchors или router-link относительно текущего маршрута, а затем вызвать вызванное изменение window.location в методе жизненного цикла компонента vue на целевом содержащем компоненте. Или просто используйте некоторые функции маршрутизации уровня vue или уровня приложения.

...