From 66480cc290bbe585b3d9e656ff333815914faa31 Mon Sep 17 00:00:00 2001
From: Van Tuan Tran <4468525+huntertran@users.noreply.github.com>
Date: Sun, 10 Nov 2019 14:38:36 -0500
Subject: [PATCH] vue-router worked:
 https://github.com/vuejs/vue-cli/issues/1875

---
 src/App.vue   | 17 ++++++++++-------
 src/main.js   |  2 ++
 src/router.js | 26 ++++++++++++++++++++++++++
 vue.config.js |  3 +++
 4 files changed, 41 insertions(+), 7 deletions(-)
 create mode 100644 src/router.js
 create mode 100644 vue.config.js

diff --git a/src/App.vue b/src/App.vue
index fcc5662..e2df67d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,24 +1,27 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <!-- <img alt="Vue logo" src="./assets/logo.png" />
+    <HelloWorld msg="Welcome to Your Vue.js App" /> -->
+    <router-link to="/foo">Go to Foo</router-link>
+    <router-link to="/bar">Go to Bar</router-link>
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+// import HelloWorld from "./components/HelloWorld.vue";
 
 export default {
-  name: 'app',
+  name: "app",
   components: {
-    HelloWorld
+    // HelloWorld
   }
-}
+};
 </script>
 
 <style>
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
diff --git a/src/main.js b/src/main.js
index 63eb05f..79e40ab 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,10 @@
 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')
diff --git a/src/router.js b/src/router.js
new file mode 100644
index 0000000..0e680a9
--- /dev/null
+++ b/src/router.js
@@ -0,0 +1,26 @@
+import VueRouter from 'vue-router'
+import Vue from 'vue'
+
+Vue.use(VueRouter);
+
+const Foo = { template: '<div>foo</div>' }
+const Bar = { template: '<div>bar</div>' }
+
+// 2. Define some routes
+// Each route should map to a component. The "component" can
+// either be an actual component constructor created via
+// `Vue.extend()`, or just a component options object.
+// We'll talk about nested routes later.
+const routes = [
+  { path: '/foo', component: Foo },
+  { path: '/bar', component: Bar }
+]
+
+// 3. Create the router instance and pass the `routes` option
+// You can pass in additional options here, but let's
+// keep it simple for now.
+const router = new VueRouter({
+  routes // short for `routes: routes`
+});
+
+export default router;
\ No newline at end of file
diff --git a/vue.config.js b/vue.config.js
new file mode 100644
index 0000000..3cacf16
--- /dev/null
+++ b/vue.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+    runtimeCompiler: true
+}
\ No newline at end of file