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
   

   View Slide

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

   View Slide

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

   View Slide

4. Vue Router
   

   View Slide

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

   View Slide

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

   View Slide

7. View Slide

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
   

   View Slide

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
   

   View Slide

10. App.vue
    
    
    
    First |
    Second
    
    
    
    
    

    View Slide

11. Nuxt ͷϧʔςΟϯά
    

    View Slide

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

    View Slide

13. View Slide

14. View Slide

15. 
    
    
    First |
    Second
    
    
    
    
    layouts/default.vue
    

    View Slide

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

    View Slide

17. $ yarn run dev
    

    View Slide

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
    

    View Slide

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

    View Slide

20. $ yarn run generate
    

    View Slide

21. ·ͱΊ
    

    View Slide

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

    View Slide