Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

kkznch

October 25, 2019
Tweet

More Decks by kkznch

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. 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

    View full-size slide

  7. 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

    View full-size slide

  8. App.vue



    First |
    Second




    View full-size slide

  9. Nuxt ͷϧʔςΟϯά

    View full-size slide

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

    View full-size slide




  11. First |
    Second




    layouts/default.vue

    View full-size slide

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

    View full-size slide

  13. $ yarn run dev

    View full-size slide

  14. 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

    View full-size slide

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

    View full-size slide

  16. $ yarn run generate

    View full-size slide

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

    View full-size slide