knaka Tech-Blog

AI, IoT, DIYエレクトロニクス, データサイエンスについて投稿予定です。

rails5 + Vue.js , ルーティングなど SPA開発(15) #Vue.js #web #SPA

index:

概要:

前のSPA 関連で、rails5 の組合せで
vue-router で、ルーティング追加等になります。

環境

rails 5.2.2
vue.js
vue-router
webpack

参考の設定

github.com

設定など

・index.html.erb
https://github.com/kuc-arc-f/vue12_ver1/blob/master/app/views/home/index.html.erb

<div id="app">
    <navbar></navbar>
    <div class="container">
        <router-view></router-view>
    </div>
</div>

<%= javascript_pack_tag 'todo' %>


・todo.js
https://github.com/kuc-arc-f/vue12_ver1/blob/master/app/javascript/packs/todo.js

import Vue from 'vue/dist/vue.esm.js'
import Router from './router/router'
import Header from './components/header.vue'

//
var app = new Vue({
  router: Router,
  el: '#app',
  components: {
    'navbar': Header,
  }  
});

・header.vue
https://github.com/kuc-arc-f/vue12_ver1/blob/master/app/javascript/packs/components/header.vue

<template>
  <div>
    <ul id="dropdown" class="dropdown-content">
      <li><router-link to="/">Top</router-link></li>
      <li><router-link to="/about">About</router-link></li>
      <li><router-link to="/tasks">Tasks</router-link></li>
    </ul>
  </div>
</template>

・router.js : ルーティングを書きます。

https://github.com/kuc-arc-f/vue12_ver1/blob/master/app/javascript/packs/router/router.js

//
import Vue from 'vue/dist/vue.esm.js'
import VueRouter from 'vue-router'
import tasksIndex from '../components/index.vue'
import About from '../components/about.vue'
import Top from '../components/top.vue'
//import Contact from '../components/contact.vue'

Vue.use(VueRouter)

export default new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Top },
    { path: '/about', component: About },
    { path: '/tasks', component: tasksIndex },
  ],
})


・routes.rb : rails 側のルーティングも、書きます

https://github.com/kuc-arc-f/vue12_ver1/blob/master/config/routes.rb



関連のページ

knaka0209.hatenablog.com