Need an example vue-router (vue 2.x) for a Layout.vue with other route based components
<p>I cannot figure out how to set this up properly using <code>vue-router</code> with vue.js 2.x</p>

<p>I want App.vue to be a main site layout module which contains basic site level things like footer, logo, main nav, etc.</p>

<p>A route based architecture which will load components based on the route inside this App.vue</p>

<p>ie: <code>/things</code> to show list and <code>/things/:id</code> to show individual item</p>

<p>I'm using the webpack template from <code>vue-cli</code></p>

<p>I'm confused about main.js vs. App.vue should I be moving the routes out of main.js into App.vue?</p>

<p>Can someone link to a simple hello world using layouts in vue-router?</p>

<pre><code>import Vue from 'vue'
import App from './App'
import Items from './components/Items'
import Item from './components/Item'
import Axios from 'axios'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
Vue.prototype.$http = Axios

const routers = new VueRouter([
  { path: '/items/:id', component: Item },
  { path: '/', component: Items }
])

// how to specify App.vue as a layout?
new Vue({
  routes
}).$mount('#app')
</code></pre>