Import Vue-Router w/ router-link practice

Author: AmberWow123

package-lock.json

@@ -9,13 +9,14 @@
   },
   "dependencies": {
     "core-js": "^2.6.5",
-    "element-ui": "^2.11.1",
-    "vue": "^2.6.10"
+    "element-ui": "^2.13.0",
+    "vue": "^2.6.10",
+    "vue-router": "^3.1.5"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.9.0",
     "@vue/cli-plugin-eslint": "^3.9.0",
-    "@vue/cli-service": "^3.9.0",
+    "@vue/cli-service": "^4.2.2",
     "babel-eslint": "^10.0.1",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",

package.json

@@ -1,33 +1,30 @@
 <template>
   <div id="app">
     <img src="./assets/logo.png">
-    <div>
-      <!--
-      <p>
-        If Element is successfully added to this project, you'll see an
-        <code v-text="'<el-button>'"></code>
-        below
-      </p>
-      <el-button>el-button</el-button>
-      <div style = "font-size: 30px;">Heading: FHDATime</div>
-      -->
-    </div>
-
-    <HelloWorld msg="FHDATime"/>
-
+    <!-- <HelloWorld msg="FHDATime"/> -->
+    <!-- <p>dsnaksndlas</p> -->
+    <ul>
+      <li><router-link to="/">Home</router-link></li>
+      <li><router-link to="/Contact">Contact</router-link></li>
+      <li><router-link to="/About">About</router-link></li>
+    </ul>
+    <router-view/>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
-
+// import HelloWorld from './components/HelloWorld.vue'
+ 
 
 export default {
   name: 'app',
-  components: {
-    HelloWorld
-  }
+  // components: {
+  //   HelloWorld
+  // }
 }
+// export default {
+//   name: 'App'
+// }
 </script>
 
 <style>

src/App.vue

@@ -0,0 +1,9 @@
+<template>
+  <h1>About us</h1>
+</template>
+
+<script>
+  export default {
+
+  }
+</script>

src/components/About.vue

@@ -0,0 +1,9 @@
+<template>
+  <h1>Contact us</h1>
+</template>
+
+<script>
+  export default {
+
+  }
+</script>

src/components/Contact.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    Hello {{ $route.params.name }}
+    <router-view>
+    </router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FirstRoute',
+  data () {
+    return {
+      msg: 'First Route Page'
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1, h2 {
+  font-weight: normal;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

src/components/FirstRoute.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FirstRouteChild',
+  data () {
+    return {
+      msg: 'FirstRouteChild Page'
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1, h2 {
+  font-weight: normal;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

src/components/FirstRouteChild.vue

@@ -4,7 +4,6 @@
     <h1>{{ msg }}</h1>
 
     <el-row>
-      
       Select quarter:
       <el-button class='focus' v-on:click="setQtr('Fall')">Fall</el-button>
       <el-button class='focus' v-on:click="setQtr('Winter')">Winter</el-button>
@@ -39,16 +38,17 @@
 
 export default {
   name: 'HelloWorld',
-  props: {
-    msg: String
-  },
+  // props: {
+  //   msg: String
+  // },
   methods:{
     setQtr(quarterName) {
       this.quarter = quarterName
     }
   },
   data() {
     return {
+      // msg: 'FHDATIME',
       quarter: '',
       course: '',
       departmentOptions: 
@@ -495,10 +495,10 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 
-body {
+/* body {
   background-color: #b8032c;
-  /* padding: 50px; */
-}
+  padding: 50px;
+} */
 
 h3 {
   margin: 40px 0 0;
@@ -524,8 +524,8 @@ a {
 }
 
 .focus:focus {
-  /* color: darkcyan; */
-  color: red;
+  color: darkcyan;
+  /* color: red; */
 }
 
 

src/components/HelloWorld.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <HelloWorld/>
+
+
+
+  </div>
+</template>
+
+<script>
+
+import HelloWorld from '@/components/HelloWorld'
+
+
+export default {
+  name: 'Home',
+  components: {
+    HelloWorld
+  },
+  data () {
+    return {
+      msg: 'FHDATIME'
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1, h2 {
+  font-weight: normal;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

src/components/Home.vue

@@ -1,14 +1,53 @@
 import Vue from 'vue'
+import Router from 'vue-router'
 import App from './App.vue'
 
+Vue.use(Router)
+
+// import HelloWorld from './components/HelloWorld.vue'
+import Home from '@/components/Home'
+import About from '@/components/About'
+import Contact from '@/components/Contact'
+// import FirstRoute from '@/components/FirstRoute'
+// import FirstRouteChild from '@/components/FirstRouteChild'
+
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import './plugins/element.js'
 Vue.use(ElementUI)
 
 Vue.config.productionTip = false
 
+const router = new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'Home',
+      component: Home
+    },
+    {
+      path: '/About',
+      name: 'About',
+      component: About
+    },
+    {
+      path: '/Contact',
+      name: 'Contact',
+      component: Contact
+    }
+  ]
+})
+
+
 new Vue({
   render: h => h(App),
+  router
 }).$mount('#app')
 
+// new Vue({
+//   el: '#app',
+//   Router,
+//   components: { App },
+//   template: '<App/>'
+// })
+