Ссылка на маршрутизатор vue-router с актуальным обновлением?

Я бы хотел, чтобы мой "SPA" обновлялся, когда я нажимаю ссылку, вместо его поведения по умолчанию, когда вы видите минимальную замену компонентов.

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

<!-- You click, then of course nothing happens when you're at HelloWorld -->
<router-link :to = "{name: 'HelloWorld'}">link</router-link>

Да, вы убиваете саму цель СПА. Spa-маршрутизатор, такой как vue-router, предназначен для навигации, которая не требует фактического обновления страницы. Если ваше приложение не работает должным образом после перехода с одной страницы на другую, значит, с вашей реализацией что-то не так, и нужно исправить.

Julian Paolo Dayag 07.08.2018 05:48

@JulianPaoloDayag Спасибо, это может иметь смысл, но, как я описал в своем вопросе, самое большое разочарование заключается в том, что ничего не происходит, когда вы нажимаете ссылку на текущую страницу - поведение заставляет (по крайней мере) меня думать, что ссылка не отвечает потому что ссылка / сайт не работает.

akai 07.08.2018 08:43

вы можете дать нам образец кода, который мы можем изучить?

Julian Paolo Dayag 07.08.2018 10:23

@JulianPaoloDayag Я добавил образец.

akai 07.08.2018 14:03

Можете ли вы также указать свои маршруты?

Julian Paolo Dayag 07.08.2018 14:10

@JulianPaoloDayag { path: '/', name: 'HelloWorld', component: HelloWorld }, который используется по умолчанию для vue-cli 2.x.

akai 07.08.2018 14:23

Ждать. Что вы пытаетесь сделать, это когда пользователь нажимает ссылку на текущую страницу, вы ожидаете, что страница будет повторно отображена?

Julian Paolo Dayag 07.08.2018 14:44

@JulianPaoloDayag Именно так. Разве не так работает большинство веб-сайтов?

akai 07.08.2018 15:22

Если вы в настоящее время находитесь на целевой странице, vue-router не будет повторно отображать текущую страницу, поскольку вы уже находитесь на целевой странице. По какой причине вы хотите обновить страницу?

Julian Paolo Dayag 07.08.2018 15:27

Фактически вы можете использовать ловушку «mount ()» для сброса любых переменных, которые у вас есть.

Julian Paolo Dayag 07.08.2018 15:28

Позвольте нам продолжить обсуждение в чате.

akai 07.08.2018 15:44
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
9
11
11 097
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Хорошо, я не знал, что нормальный тег <a> работает так, как я ожидал если используется режим истории, поэтому в итоге я сделал следующее:

<a :href = "$router.resolve({name: 'HelloWorld'}).href">link</a>

а может просто:

<a href = "/">link</a>

Спасибо. У меня была ссылка на маршрутизатор с: to object, но я хотел перезагрузить страницу в этом конкретном случае, поэтому я сделал $router.resolve(to).href.

Christiaan Maks 17.01.2019 21:03

Спасибо, акай, пользуюсь вашей помощью в том случае, если я хочу использовать тот же компонент. У меня есть список категорий, и когда я нажимаю на определенную страницу категории, ее необходимо перезагрузить.

<a :href = "$router.resolve({name:'category', params: {id: category.id}}).href">
                                                        {{category.name}}<span>
                                                            ({{category.posts.length}})
                                                        </span>
                                                    </a>

Другие вопросы по теме