Add examples with routes

Author: ktquez

demo/src/App.vue

@@ -1,37 +1,12 @@
 <template>
   <div id="app" role="main">
-    <logo :src="require('@/assets/logo.png')" />
-    <h1 data-va="main header">{{ msg }}</h1>
-    <h2>Essential Links</h2>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
-    </ul>
-    <h2>Ecosystem</h2>
-    <ul>
-      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
-      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
-      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
-    </ul>
+    <router-view />
   </div>
 </template>
 
 <script>
-import Logo from '@/components/Logo'
-
 export default {
-  name: 'app',
-  components: {
-    Logo
-  },
-  data () {
-    return {
-      msg: 'Welcome - Open your console'
-    }
-  }
+  name: 'app'
 }
 </script>
 

demo/src/main.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import App from './App.vue'
+import router from './router.js'
 
 // Use this plugin only in development => if (process.env.NODE_ENV !== 'production') 
 const VueAxe = require('../vue-axe')
@@ -20,5 +21,6 @@ Vue.config.productionTip = false
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
+  router,
   render: h => h(App)
 })

demo/src/pages/About.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <h1>About page</h1>
+    <!-- Force aXe errors -->
+    <section role="ljks">
+      <p role="button">
+        My content
+        <router-link to="/">Go to Home</router-link>
+        <router-link to="/contact">Contact</router-link>
+      </p>
+    </section>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'About'
+  }
+</script>
+
+<style scoped>
+
+</style>

demo/src/pages/Contact.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <h1>Contact page</h1>
+    <!-- Force aXe errors -->
+    <section role="ljks">
+      <p role="button">
+        Contact me
+        <router-link to="/">Go to Home</router-link>
+      </p>
+    </section>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Contact'
+  }
+</script>
+
+<style>
+
+</style>

demo/src/pages/Home.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <logo :src="require('@/assets/logo.png')" />
+    <h1 data-va="main header">{{ msg }}</h1>
+    <h2>Access Pages</h2>
+    <ul>
+      <li>
+        <router-link to="/about">About</router-link>
+      </li>
+       <li>
+        <router-link to="/contact">Contact</router-link>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+  import Logo from '@/components/Logo'
+  
+  export default {
+    name: 'Home',
+    components: {
+      Logo
+    },
+    data () {
+      return {
+        msg: 'Welcome - Open your console'
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

demo/src/router.js

@@ -0,0 +1,40 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+import Home from '@/pages/Home'
+import About from '@/pages/About'
+import Contact from '@/pages/Contact'
+
+Vue.use(VueRouter)
+
+const router = new VueRouter({
+  mode: 'history',
+  routes: [
+    {
+      name: 'home',
+      path: '/',
+      component: Home,
+      meta: {
+        announcer: 'Home page'
+      }
+    },
+    {
+      name: 'about',
+      path: '/about',
+      component: About,
+      meta: {
+        announcer: 'About page'
+      }
+    },
+    {
+      name: 'contact',
+      path: '/contact',
+      component: Contact,
+      meta: {
+        announcer: 'Contact page'
+      }
+    }
+  ]
+})
+
+export default router