VueRouterとNuxtのルーティング/VueRouter and Nuxt Routing

v-okinawa Vue.js/Nuxt.js meetup #2 初心者歓迎
LT枠で使用

参考URL
https://v-okinawa.connpass.com/event/150524

Transcript

1. Vue Router ͱ Nuxt ͷϧʔςΟϯά גࣜձࣾRe:Build Յ਺ ါىʢ@kkznchʣ 2019೥10݄25೔ʢۚʣ v-okinawa Vue.js/Nuxt.js meetup #2
2. ͚͚ͣΜ @kkznch ܦྺ ɾ1990೥ͷԭೄੜ·Ε ɾී௨ߴग़਎ɺླྀେ৘ใ޻ֶՊग़਎ ɾిྗձࣾͷITΠϯϑϥɺηΩϡϦςΟ ɾגࣜձࣾRe:BuildͰWebΤϯδχΞ झຯ ɾήʔϜɺΞχϝɺόϨʔϘʔϧɺϐΞϊ ࠷ۙͷग़དྷࣄ ɾMGSͷϓϨΠಈը͕໘ന͍ɺݟΔ΂͖
3. ࠓ೔࿩͢͜ͱ • Vue Router ʹ͍ͭͯ • Nuxt ͷϧʔςΟϯάʹ͍ͭͯ
4. Vue Router
5. Vue Router ͸ Vue.js ެࣜϧʔλͰ͢ ※ Vue Router ެࣜαΠτ(https://router.vuejs.org/ja/) ΑΓ
6. SPA (Single Page Application) Λ ࣮ݱ͢ΔͨΊͷύοέʔδ
8. 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
9. 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
10. App.vue <template> <div id="app"> <div id="nav"> <router-link to="/first">First</router-link> | <router-link to="/second">Second</router-link> </div> <router-view/> </div> </template>
11. Nuxt ͷϧʔςΟϯά
12. Nuxt.js ͸ pages σΟϨΫτϦ಺ͷ Vue ϑΝΠϧͷ໦ߏ଄ʹԊͬͯɺࣗಈతʹ vue-router ͷઃఆΛੜ੒͠·͢ ※ NUXT JS ެࣜαΠτ(https://ja.nuxtjs.org/guide/routing/) ΑΓ
15. <template> <div> <div id="nav"> <n-link to="/first">First</n-link> | <n-link to="/second">Second</n-link> </div> <nuxt /> </div> </template> layouts/default.vue
16. ͲɺͲ͏ͳ͍ͬͯΔΜͩ...ʁ
17. $ yarn run dev
18. 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
19. ͪͳΈʹ ੩తϑΝΠϧॻ͖ग़͠ͷ৔߹ͩͱ
20. $ yarn run generate
21. ·ͱΊ
22. ·ͱΊ • Vue Router ͰSPAͳϖʔδ͕࡞ΕΔ • Nuxt Ͱ؆୯ʹSPAͳϖʔδ͕࡞ΕΔ • Nuxt ͷϧʔςΟϯά׬શʹཧղͨ͠