Маршрутизатор Vue.js с маршрутами Ruby on Rails - PullRequest
Новая
       8

Маршрутизатор Vue.js с маршрутами Ruby on Rails

1 голос
/ 13 июня 2019

В настоящее время я работаю над приложением с бэкэндом Ruby on Rails и внешним интерфейсом Vue.js. Это одностраничное приложение. Я использую гем webpacker для создания своего основного js-файла.

Я добавил vue-router и несколько маршрутов внешнего интерфейса. Я могу перемещаться, используя <router-link>, который правильно отображает соответствующий компонент. Чего я не могу понять, так это как настроить мои внешние интерфейсы, чтобы кто-то мог напрямую перейти к URL-адресу, не затрагивая мои маршруты rails.

Например, если я наберу /sample-route, я бы хотел попасть на мой маршрут Vue.js, а не на мой маршрут рельсов. Я все еще хочу иметь возможность делать вызовы API для моих маршрутов рельсов, а также. Например /api/users.

Любая помощь приветствуется.

Ответы [ 2 ]

1 голос
/ 13 июня 2019

Моя проблема была решена путем добавления <router-view></router-vew> в мой основной компонент Vue.js.

Вот и мой файл маршрутов рельсов: 

Rails.application.routes.draw do
  namespace :api do
    # api routes here
  end

  root 'application#index'
  get '/*path', to: 'application#index' 
end
0 голосов
/ 13 июня 2019

В зависимости от того, сколько маршрутов у вас есть, вы можете добавить свои маршруты Vue в routes.rb и отправить их в корневой маршрут приложения Vue. например Webpacker рендерит ваш пакет js с контроллером # action vue_controller#app. Маршрутизатор вашего приложения Vue использует /user/profile. В routes.rb добавьте маршрут:

get "/user/profile" => "vue_controller#app" # <- The controller action rendering your Vue pack

Если кажется невозможным переопределить каждый маршрут Vue в routes.rb, вы можете захотеть взглянуть на универсальный запасной маршрут, который отправляет их в действие контроллера приложения vue. Пока вы не меняете маршрут, а просто отвечаете действием контроллера Vue, маршрутизатор Vue позаботится о том, чтобы при загрузке страницы отображались правильные компоненты для этого маршрута.

В Rails 4 вы можете использовать что-то вроде ответов в этом SO-вопросе, чтобы помочь вам с настройкой "универсального" маршрута Rails-универсальный маршрут .

РЕДАКТИРОВАТЬ: Использование поймать весь маршрут приводит к некоторым проблемам с 404. Если пользователь запрашивает маршрут, который не существует, приложение Rails все равно отправит ему пакет Vue. Чтобы это исправить, вам нужно добавить некоторую обработку неизвестного маршрута в маршрутизаторе Vue, чтобы отобразить что-то вроде страницы 404.

...