Vue webpack Vue-router configuration (Standard JS Style)

App.vue

// src/App.vue
<template>
  <div>
    <div class="menu">
      <router-link :to=" { name: 'home' }">Home</router-link>
      <router-link :to=" { name: 'auth' }">Auth</router-link>
    </div>
    <div id="app">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import Hello from './components/Hello'

export default {
  name: 'app',
  components: {
    Hello
  }
}
</script>

main.js

/* eslint-disable no-new */
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: '',
  // https://router.vuejs.org/en/essentials/history-mode.html
  routes: [{
    path: '/',
    name: 'home',
    component: function (resolve) {
      require(['./components/Hello.vue'], resolve)
    }
  }, {
    path: '/auth',
    name: 'auth',
    component: function (resolve) {
      require(['./components/Auth.vue'], resolve)
    }
  }, {
    path: '*',
    name: '404',
    component: function (resolve) {
      require(['./components/404.vue'], resolve)
    }
  }]
})

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})