Переход напрямую по URL во Vue.js не рендерит child-компонент при использовании vue-router

Переход напрямую по URL во Vue.js не рендерит child-компонент при использовании vue-router

25.07.2018 08:32:14 Просмотров 28 Источник

Структура моего роутера следующая(часть для наглядности):

введите сюда описание изображения

Когда я кликаю по соответствующей кнопке меню (нав. бар слева на скрине ниже), то переход между компонентами работает правильно и в адресной строке указан верный путь:

введите сюда описание изображения

Но вот если попробовать напрямую перейти по этому URL в адресной строке (тупо выделить и нажать enter, например), то получаю 404 ошибку:

введите сюда описание изображения

И это именно в случае с child-компонентами в router. Почему так происходит и как это можно вылечить? Переход на страницу по умолчанию не подходит. Необходимо именно перейти по указанному адресу и отрендерить то, что и должно быть по этому URL.

У вопроса есть решение - Посмотреть?

https://ru.stackoverflow.com/questions/860274/%d0%9f%d0%b5%d1%80%d0%b5%d1%85%d0%be%d0%b4-%d0%bd%d0%b0%d0%bf%d1%80%d1%8f%d0%bc%d1%83%d1%8e-%d0%bf%d0%be-url-%d0%b2%d0%be-vue-js-%d0%bd%d0%b5-%d1%80%d0%b5%d0%bd%d0%b4%d0%b5%d1%80%d0%b8%d1%82-child-%d0%ba%d0%be%d0%bc%d0%bf%d0%be%d0%bd%d0%b5%d0%bd%d1%82-%d0%bf%d1%80%d0%b8-%d0%b8%d1%81%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b8#comment1388014_860274
@overthesanity не помогло
https://ru.stackoverflow.com/questions/860274/%d0%9f%d0%b5%d1%80%d0%b5%d1%85%d0%be%d0%b4-%d0%bd%d0%b0%d0%bf%d1%80%d1%8f%d0%bc%d1%83%d1%8e-%d0%bf%d0%be-url-%d0%b2%d0%be-vue-js-%d0%bd%d0%b5-%d1%80%d0%b5%d0%bd%d0%b4%d0%b5%d1%80%d0%b8%d1%82-child-%d0%ba%d0%be%d0%bc%d0%bf%d0%be%d0%bd%d0%b5%d0%bd%d1%82-%d0%bf%d1%80%d0%b8-%d0%b8%d1%81%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b8#comment1388017_860274
@overthesanity да, проблема именно с children.
https://ru.stackoverflow.com/questions/860274/%d0%9f%d0%b5%d1%80%d0%b5%d1%85%d0%be%d0%b4-%d0%bd%d0%b0%d0%bf%d1%80%d1%8f%d0%bc%d1%83%d1%8e-%d0%bf%d0%be-url-%d0%b2%d0%be-vue-js-%d0%bd%d0%b5-%d1%80%d0%b5%d0%bd%d0%b4%d0%b5%d1%80%d0%b8%d1%82-child-%d0%ba%d0%be%d0%bc%d0%bf%d0%be%d0%bd%d0%b5%d0%bd%d1%82-%d0%bf%d1%80%d0%b8-%d0%b8%d1%81%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b8#comment1388019_860274
Вы можете сделать минимальный пример на stackblitz?
https://ru.stackoverflow.com/questions/860274/%d0%9f%d0%b5%d1%80%d0%b5%d1%85%d0%be%d0%b4-%d0%bd%d0%b0%d0%bf%d1%80%d1%8f%d0%bc%d1%83%d1%8e-%d0%bf%d0%be-url-%d0%b2%d0%be-vue-js-%d0%bd%d0%b5-%d1%80%d0%b5%d0%bd%d0%b4%d0%b5%d1%80%d0%b8%d1%82-child-%d0%ba%d0%be%d0%bc%d0%bf%d0%be%d0%bd%d0%b5%d0%bd%d1%82-%d0%bf%d1%80%d0%b8-%d0%b8%d1%81%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b8#comment1388031_860274
Раньше не сталкивался с stackblitz. Наверное, займет какое-то время. Постараюсь.
https://ru.stackoverflow.com/questions/860274/%d0%9f%d0%b5%d1%80%d0%b5%d1%85%d0%be%d0%b4-%d0%bd%d0%b0%d0%bf%d1%80%d1%8f%d0%bc%d1%83%d1%8e-%d0%bf%d0%be-url-%d0%b2%d0%be-vue-js-%d0%bd%d0%b5-%d1%80%d0%b5%d0%bd%d0%b4%d0%b5%d1%80%d0%b8%d1%82-child-%d0%ba%d0%be%d0%bc%d0%bf%d0%be%d0%bd%d0%b5%d0%bd%d1%82-%d0%bf%d1%80%d0%b8-%d0%b8%d1%81%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b8#comment1388372_860274
@overthesanity не получается там такой пример создать..
https://ru.stackoverflow.com/questions/860274/%d0%9f%d0%b5%d1%80%d0%b5%d1%85%d0%be%d0%b4-%d0%bd%d0%b0%d0%bf%d1%80%d1%8f%d0%bc%d1%83%d1%8e-%d0%bf%d0%be-url-%d0%b2%d0%be-vue-js-%d0%bd%d0%b5-%d1%80%d0%b5%d0%bd%d0%b4%d0%b5%d1%80%d0%b8%d1%82-child-%d0%ba%d0%be%d0%bc%d0%bf%d0%be%d0%bd%d0%b5%d0%bd%d1%82-%d0%bf%d1%80%d0%b8-%d0%b8%d1%81%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b8#comment1388543_860274
@overthesanity node.js/express сейчас я лишь смог сделать дефолтный редирект на главную, следуя документации. Но мне нужно было именно рендерить конкретный компонент. Насколько я понял, все дело в том, что при использовании Vue нет SSR.
https://ru.stackoverflow.com/questions/860274/%d0%9f%d0%b5%d1%80%d0%b5%d1%85%d0%be%d0%b4-%d0%bd%d0%b0%d0%bf%d1%80%d1%8f%d0%bc%d1%83%d1%8e-%d0%bf%d0%be-url-%d0%b2%d0%be-vue-js-%d0%bd%d0%b5-%d1%80%d0%b5%d0%bd%d0%b4%d0%b5%d1%80%d0%b8%d1%82-child-%d0%ba%d0%be%d0%bc%d0%bf%d0%be%d0%bd%d0%b5%d0%bd%d1%82-%d0%bf%d1%80%d0%b8-%d0%b8%d1%81%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b8#comment1388572_860274
Но суть ведь в том, что все равно мы перейдем только на страницу по умолчанию, но не туда, куда на нужно.
https://ru.stackoverflow.com/questions/860274/%d0%9f%d0%b5%d1%80%d0%b5%d1%85%d0%be%d0%b4-%d0%bd%d0%b0%d0%bf%d1%80%d1%8f%d0%bc%d1%83%d1%8e-%d0%bf%d0%be-url-%d0%b2%d0%be-vue-js-%d0%bd%d0%b5-%d1%80%d0%b5%d0%bd%d0%b4%d0%b5%d1%80%d0%b8%d1%82-child-%d0%ba%d0%be%d0%bc%d0%bf%d0%be%d0%bd%d0%b5%d0%bd%d1%82-%d0%bf%d1%80%d0%b8-%d0%b8%d1%81%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b8#comment1388640_860274
добавил вместо своего варианта Ваш, работает также. Думаю, что на этом можно закрыть вопрос. Спасибо.)
https://ru.stackoverflow.com/questions/860274/%d0%9f%d0%b5%d1%80%d0%b5%d1%85%d0%be%d0%b4-%d0%bd%d0%b0%d0%bf%d1%80%d1%8f%d0%bc%d1%83%d1%8e-%d0%bf%d0%be-url-%d0%b2%d0%be-vue-js-%d0%bd%d0%b5-%d1%80%d0%b5%d0%bd%d0%b4%d0%b5%d1%80%d0%b8%d1%82-child-%d0%ba%d0%be%d0%bc%d0%bf%d0%be%d0%bd%d0%b5%d0%bd%d1%82-%d0%bf%d1%80%d0%b8-%d0%b8%d1%81%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b8#comment1388671_860274
Работает, но идёт накладка компонентов. Маленький баг с самим компонентом я уже поправлю. К вопросу это не относится.
https://ru.stackoverflow.com/questions/860274/%d0%9f%d0%b5%d1%80%d0%b5%d1%85%d0%be%d0%b4-%d0%bd%d0%b0%d0%bf%d1%80%d1%8f%d0%bc%d1%83%d1%8e-%d0%bf%d0%be-url-%d0%b2%d0%be-vue-js-%d0%bd%d0%b5-%d1%80%d0%b5%d0%bd%d0%b4%d0%b5%d1%80%d0%b8%d1%82-child-%d0%ba%d0%be%d0%bc%d0%bf%d0%be%d0%bd%d0%b5%d0%bd%d1%82-%d0%bf%d1%80%d0%b8-%d0%b8%d1%81%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b8#comment1388699_860274
Хорошо, удачи :-)
https://ru.stackoverflow.com/questions/860274/%d0%9f%d0%b5%d1%80%d0%b5%d1%85%d0%be%d0%b4-%d0%bd%d0%b0%d0%bf%d1%80%d1%8f%d0%bc%d1%83%d1%8e-%d0%bf%d0%be-url-%d0%b2%d0%be-vue-js-%d0%bd%d0%b5-%d1%80%d0%b5%d0%bd%d0%b4%d0%b5%d1%80%d0%b8%d1%82-child-%d0%ba%d0%be%d0%bc%d0%bf%d0%be%d0%bd%d0%b5%d0%bd%d1%82-%d0%bf%d1%80%d0%b8-%d0%b8%d1%81%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b8#comment1388704_860274
Спасибо, взаимно.

Ответы - Переход напрямую по URL во Vue.js не рендерит child-компонент при использовании vue-router / Переход напрямую по URL во Vue.js не рендерит child-компонент при использовании vue-router

Является ответом!
Daniyal Lukmanov

26.07.2018 01:54:05

Если используется node.js/Express (как в моем случае), то необходимо прописать следующую строку

app.get('/*', (req, res) => res.sendFile('index.html', { root: __dirname }));
Vladislav

26.07.2018 02:06:30

Может быть вам необходим Режим HTML5 History?

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

https://ru.stackoverflow.com/questions/860274/%d0%9f%d0%b5%d1%80%d0%b5%d1%85%d0%be%d0%b4-%d0%bd%d0%b0%d0%bf%d1%80%d1%8f%d0%bc%d1%83%d1%8e-%d0%bf%d0%be-url-%d0%b2%d0%be-vue-js-%d0%bd%d0%b5-%d1%80%d0%b5%d0%bd%d0%b4%d0%b5%d1%80%d0%b8%d1%82-child-%d0%ba%d0%be%d0%bc%d0%bf%d0%be%d0%bd%d0%b5%d0%bd%d1%82-%d0%bf%d1%80%d0%b8-%d0%b8%d1%81%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b8/860578#comment1388679_860578
Я его и использую.
Закрыть X