Как мне обрабатывать данные URL между доменом и хэштегом с помощью Vue Router? - PullRequest
Новая
       24

Как мне обрабатывать данные URL между доменом и хэштегом с помощью Vue Router?

0 голосов
/ 06 октября 2018

Я работаю над проектом, используя vue-cli, vue router и node.js.Маршрутизатор Vue находится в режиме хэширования, потому что я хочу, чтобы пользователи могли копировать и вставлять URL-адреса или печатать из памяти, и в итоге они оказались там, где они ожидают, а не увидели страницу Cannot GET.Проблема, с которой я столкнулся, заключается в том, что если я использовал «npm run dev», а затем перешел к «localhost: 8080 / foo», он автоматически изменится на «localhost: 8080 / foo / # /» и покажет домашнюю страницу.однако если я использовал node и express в файле server.js для обслуживания папки dist, созданной после «npm run build», то же самое приводит к Cannot GET.

Можно ли как-то проверить URL-адрес в запросе и, если он не содержит хеш, просто добавить его и продолжить, как если бы пользователь ввел его?Таким образом, «localhost: 8080 / foo» будет изменен на «localhost: 8080 / # / foo», а затем перейдет на ожидаемую страницу, в то время как «localhost: 8080 / # / foo» не будет изменен.

Настало время задать вопрос здесь, и я уверен, что я не включил достаточно информации;если понадобятся какие-либо подробности, чтобы ответить на них, я с удовольствием предоставлю ихСпасибо за помощь!

Ответы [ 3 ]

0 голосов
/ 06 октября 2018

Поскольку эта проблема возникает только в том случае, если пользователь сам переходит на URL, вы можете использовать хук жизненного цикла created в своем основном компоненте и посмотреть на window.location.Если window.location.pathname не пусто или один слеш, вы знаете, что они перешли на пользовательский URL.Затем вы можете перенаправить клиентскую часть пользователя на правильный URL.Приятной особенностью является то, что вам не нужно беспокоиться о том, какие URL перенаправлять на стороне сервера, особенно если вы запускаете на сервере больше, чем интерфейс Vue, поскольку перенаправление происходит только при загрузке приложения Vue. 

// App.vue
created () {
  const pathname = window.location.pathname;
  if (['', '/'].indexOf(pathname) === -1) {
    window.location = `/#${pathname}`
  }
}

Edit Vue Template

0 голосов
/ 07 октября 2018

В итоге я нашел решение, добавив его в свой файл server.js: 

if (req.url !== '/' && !req.url.includes('static'))
    res.redirect(`/#${req.url}`);

Я думаю, что есть случаи, когда это не сработает, но пока все выглядит хорошо.Если пользователь пытается получить доступ к domain.com/foo, он перенаправит его на domain.com/#/foo, и будет показана правильная страница.Если пользователь ввел domain.com/#/anything/at/all, все server.js видит «/», и vue router позаботится об этом.Спасибо всем за помощь!

0 голосов
/ 06 октября 2018

Механизм хеш-маршрутизации в основном предназначен для маршрутизации на стороне клиента и не должен иметь ничего общего с сервером (исключая 301 перенаправления).

Когда вы запрашиваете "localhost: 8080 / foo"сервер ожидает URI "/ foo", а все, что находится после хеша, например "/ foo # main", "main", здесь будет игнорироваться.#Main используется только на стороне клиента для представления различных выходных данных браузера.

Я не проверял его, но, возможно, вы могли бы использовать какой-то Navigation Guard и сделать некоторые проверки,или, возможно, проверьте состояние пользователя при посещении страницы примерно так: 

if (user === null) {
    window.location.href = '' // Default link
} else {
  return;
}
...