add vue-router

`yarn add vue-router`

Author: mimosafa

package.json

@@ -25,6 +25,7 @@
     "yarn": "^1.22.4"
   },
   "dependencies": {
-    "vue": "^2.6.11"
+    "vue": "^2.6.11",
+    "vue-router": "^3.3.4"
   }
 }

src/app.vue

@@ -4,7 +4,12 @@
       <h1 class="title">Hello World!</h1>
     </header>
     <article>
-      <p>{{ paragraph }}</p>
+      <router-view></router-view>
+      <ul>
+        <li><router-link to="/">Home</router-link></li>
+        <li><router-link to="/foo">Foo</router-link></li>
+        <li><router-link to="/bar">Bar</router-link></li>
+      </ul>
     </article>
     <footer>
       <address>w-tokyodo</address>
@@ -14,11 +19,7 @@
 
 <script>
   export default {
-    data() {
-      return {
-        paragraph: 'This is article.'
-      }
-    }
+    //
   }
 </script>
 

src/index.js

@@ -1,9 +1,28 @@
 import './index.scss';
 import Vue from 'vue';
+import VueRouter from 'vue-router';
 import App from './app.vue';
 
+Vue.use(VueRouter);
+
+const Home = { template: '<div>Home</div>' };
+const Foo = { template: '<div>foo</div>' };
+const Bar = { template: '<div>bar</div>' };
+
+const routes = [
+  { path: '/', component: Home },
+  { path: '/foo', component: Foo },
+  { path: '/bar', component: Bar }
+];
+
+const router = new VueRouter({
+  mode: 'history',
+  routes: routes
+});
+
 new Vue({
   el: '#app',
   components: { App },
-  template: '<App/>'
+  template: '<App/>',
+  router
 });

yarn.lock

@@ -4147,6 +4147,11 @@ vue-loader@^15.*:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-router@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.3.4.tgz#4e38abc34a11c41b6c3d8244449a2e363ba6250b"
+  integrity sha512-SdKRBeoXUjaZ9R/8AyxsdTqkOfMcI5tWxPZOUX5Ie1BTL5rPSZ0O++pbiZCeYeythiZIdLEfkDiQPKIaWk5hDg==
+
 vue-style-loader@^4.1.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"