Vue Router の始め方 (NPM + webpack)

【追記】2019.01.27

この記事は、そもそも Vue CLI をアップデートした際、vue create projectname 手順後の npm run build がコンパイルエラーとなったために作成した

現在は、コンパイルエラーは解消されているため、本記事は不要の手順となった

コンパイルエラーの原因は、router.js において

{

path: '/about',

// route level code-splitting

// this generates a separate chunk (about.[hash].js) for this route

// which is lazy-loaded when the route is visited.

component: () => import(/* webpackChunkName: "about" */ './views/About.vue')

}

となっている部分で、

これを

import About from './views/About.vue'

と

{

path: '/about',

component: About

}

に分けることで解決した

ただし、元の書き方にはそれ自体に意味があるはずで、それについては未検証

手順

1. router.js を作成

import Vue from 'vue'

import Router from 'vue-router'

import Home from './views/Home.vue'

import About from './views/About.vue'

Vue.use(Router);

export default new Router({

mode: 'history',

base: process.env.BASE_URL,

routes: [

{

path: '/',

component: Home

}

]

})

2. main.js に router.js をインポート

import Vue from 'vue'

import './plugins/vuetify'

import App from './App.vue'

import router from './router'

import store from './store'

import './registerServiceWorker'

Vue.config.productionTip = false;

new Vue({

router,

store,

render: h => h(App)

}).$mount('#app');

3. views フォルダを作成し、Home.vue を作成

</template>

import HelloWorld from '../components/HelloWorld'

export default {

components: {

HelloWorld

}

</script>

4. App.vue を書き変える

<HelloWorld/> を <router-view></router-view> に変更

不要な行を削除

import HelloWorld from './components/HelloWorld'
components: { HelloWorld },

Vue Router の始め方 (NPM + webpack)

【 追記 】2019.01.27

手順

【追記】2019.01.27