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

0451a8e214a5c0ddffd489528adbf787?s=47 kkznch
October 25, 2019

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

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

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

0451a8e214a5c0ddffd489528adbf787?s=128

kkznch

October 25, 2019
Tweet

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) Λ ࣮ݱ͢ΔͨΊͷύοέʔδ

  7. None
  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/) ΑΓ
  13. None
  14. None
  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

    ͷϧʔςΟϯά׬શʹཧղͨ͠