Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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. 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
  2. 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
  3. 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>
  4. 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