title: Need an example vue-router (vue 2.x) for a Layout.vue with other route based components
body: <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>