31 register page routing / ユーザー登録ページのルーティング (vue-router + Rails)

[hasyrails]

ユーザー登録ページを実装する

• ヘッダーボタンからの遷移を実装
• ここからRailsの設定も必要になるか？

[hasyrails]

vue-routerの設定

各リンクに対応するページとして表示させるコンポーネント は app/javascript/pages/　下に保存する

Vue.jsにVue Routerを導入してルーティングを行う方法

// app/javascript/router/index.js

import Register from '../pages/Register'

Vue.use(VueRouter); 

const routes = [
  { path: '/register', component: Register },
];

const router = new VueRouter({
  routes,
  mode: 'history'
});

export default router;

初期化設定（エントリポイント）

// app/javascript/hello_vue.js

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
+    router,
    render: h => h(App)
  }).$mount()
  document.body.appendChild(app.$el)

  console.log(app)
})

注意

この設定だけでは表示できないことに注意

Rails.application.routes.draw do
  root to: 'home#index'
end

Railsにとっては /registerというパスは知らないと怒られる

[hasyrails]

Rails側の設定

Rails.application.routes.draw do
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
  root to: 'home#index'
+  get '*path', to: 'home#index'
end

画面のルーティングはフロント側で管理したいため、サーバー側ではルートパス以外へのGETリクエストをルートパスにリダイレクトする

Rails 5.1 + Vue.js + Vuex + vue-routerの初期設定

[hasyrails]

vue-routerで表示成功

// app/javascript/pages/Register.vue

<template>
  <div>Register</div>  
</template>