ScoobyAndShaggyProgrammaticRouting

by Adam McQuistan

HTML

<!-- index.html -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <p>
    <a @click="toScooby">Scooby</a>
    <a @click="toShaggy">Shaggy</a>
   </p>
   <router-view></router-view>
</div>

CSS

img {
  width: 100px;
  height: 120px;
}

a {
  cursor: pointer;
  text-decoration: underline;
}

JavaScript

const Scooby = {
	template: `
  	<div>
    	<h4>Scooby</h4>
      <p><img src="https://www.wbkidsgo.com/Portals/4/Images/Content/Characters/Scooby/characterArt-scooby-SD.png" alt="scooby"/></p>
    </div>`
}

const Shaggy = {
	template: `
  	<div class="character">
    	<h4>Shaggy</h4>
      <p><img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/87/ShaggyRogers.png/150px-ShaggyRogers.png" alt="shaggy"/></p>
    </div>`
}

const router = new VueRouter({
  routes: [
    { path: '/characters/scooby', component: Scooby },
    { path: '/characters/shaggy', component: Shaggy }
  ]
})

const app = new Vue({
	router:router,
  methods: {
  	toScooby () { this.$router.push('/characters/scooby') },
   	toShaggy () { this.$router.push('/characters/shaggy') }
  }
}).$mount('#app')