Vue Router ͱ Nuxt ͷϧʔςΟϯά גࣜձࣾRe:Build Յ਺ ါىʢ@kkznchʣ 2019೥10݄25೔ʢۚʣ v-okinawa Vue.js/Nuxt.js meetup #2 

͚͚ͣΜ @kkznch ܦྺ ɾ1990೥ͷԭೄੜ·Ε ɾී௨ߴग़਎ɺླྀେ৘ใ޻ֶՊग़਎ ɾిྗձࣾͷITΠϯϑϥɺηΩϡϦςΟ ɾגࣜձࣾRe:BuildͰWebΤϯδχΞ झຯ ɾήʔϜɺΞχϝɺόϨʔϘʔϧɺϐΞϊ ࠷ۙͷग़དྷࣄ ɾMGSͷϓϨΠಈը͕໘ന͍ɺݟΔ΂͖ 

ࠓ೔࿩͢͜ͱ • Vue Router ʹ͍ͭͯ • Nuxt ͷϧʔςΟϯάʹ͍ͭͯ 

Vue Router 

Vue Router ͸ Vue.js ެࣜϧʔλͰ͢ ※ Vue Router ެࣜαΠτ(https://router.vuejs.org/ja/) ΑΓ 

SPA (Single Page Application) Λ ࣮ݱ͢ΔͨΊͷύοέʔδ 

No content

import Vue from 'vue'; import VueRouter from 'vue-router'; import First from '../views/First'; import Second from '../views/Second'; Vue.use(VueRouter); const routes = [ { path: '/first', name: 'first', component: First, }, { path: '/second', name: 'second', component: Second, } ]; const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }); export default router router.js 

import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false new Vue({ router, render: h => h(App) }).$mount('#app') main.js 

App.vue 

Nuxt ͷϧʔςΟϯά 

Nuxt.js ͸ pages σΟϨΫτϦ಺ͷ Vue ϑΝΠϧͷ໦ߏ଄ʹԊͬͯɺࣗಈతʹ vue-router ͷઃఆΛੜ੒͠·͢ ※ NUXT JS ެࣜαΠτ(https://ja.nuxtjs.org/guide/routing/) ΑΓ 

No content

No content

layouts/default.vue 

ͲɺͲ͏ͳ͍ͬͯΔΜͩ...ʁ 

$ yarn run dev 

import Vue from 'vue' import Router from 'vue-router' import { interopDefault } from './utils' import scrollBehavior from './router.scrollBehavior.js' const _fd0ef1ee = () => interopDefault(import('../pages/first.vue' /* webpackChunkName: "pages/first" */)) const _59dc092a = () => interopDefault(import('../pages/second.vue' /* webpackChunkName: "pages/second" */)) const _4968fc2b = () => interopDefault(import('../pages/index.vue' /* webpackChunkName: "pages/index" */)) Vue.use(Router) export const routerOptions = { mode: 'history', base: decodeURI('/'), linkActiveClass: 'nuxt-link-active', linkExactActiveClass: 'nuxt-link-exact-active', scrollBehavior, routes: [{ path: "/first", component: _fd0ef1ee, name: "first" }, { path: "/second", component: _59dc092a, name: "second" }, { path: "/", component: _4968fc2b, name: "index" }], fallback: false } export function createRouter () { return new Router(routerOptions) } .nuxt/router.js 

ͪͳΈʹ ੩తϑΝΠϧॻ͖ग़͠ͷ৔߹ͩͱ 

$ yarn run generate 

·ͱΊ 

·ͱΊ • Vue Router ͰSPAͳϖʔδ͕࡞ΕΔ • Nuxt Ͱ؆୯ʹSPAͳϖʔδ͕࡞ΕΔ • Nuxt ͷϧʔςΟϯά׬શʹཧղͨ͠