Vamos criar nossos próprios componentes e páginas usando o Vue-Router

<template>
  <div>
    <p>Olá Mundo</p>
  </div>
</template>

<script>
export default {
  name: 'Ola'
}
</script>

<style scoped>
</style>

Criando um novo componente

Ola.vue

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Ola from '@/components/Ola'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/Ola',
      name: 'Ola',
      component: Ola
    }
  ]
})

Configurando uma nova rota

src/router/index.js

Componentes dentro de componentes

Um componente pode ter vários filhos podendo compor uma interface e até mesmo trocar dados entre eles.

<template>
  <div>
  	<img src="http://i.imgur.com/qYkIohz.jpg">
  </div>
</template>

<script>
export default {
  name: 'Gato'
}
</script>

<style scoped>
img {
  width: 600px;
}
</style>

Criando um componente filho

Gato.vue

<template>
  <div>
    <gato></gato>
    <p>Olá Mundo</p>
  </div>
</template>

<script>
import gato from './Gato.vue'

export default {
  name: 'OlaMundo',
  components: { gato }
}
</script>

<style scoped>
</style>

Ganhamos nossa própria tag! <3

Ola.vue

“Parte importante da genialidade não está em conceber algo inteiramente novo a partir do zero, mas em tomar emprestada uma tecnologia madura de um campo inteiramente diferente e usá-la para resolver um problema de outra natureza”.

- Steven Johnson Trecho do livro “De Onde Vêm as Boas Ideias”

Até a próxima!

Não deixem de revisar as apostilas e resumos