Vue

by joshmoto

HTML

<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>
<div id="app">

</div>

CSS

body {
  font-family: Helvetica;
}

#app {
  background: #fff;
  height: 100%;
}

Vue

/* Vue.component('item', {
  props: ['item'],
  template: '<li>{{ item.text }}</li>'
})

var app = new Vue({
  el: '#app',
  data: {
    groceryList: [
      { id: 0, text: 'Vegetables' },
      { id: 1, text: 'Cheese' },
      { id: 2, text: 'Whatever else humans are supposed to eat' }
    ]
  }
}) */

const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>home page</p>' }
const About = { template: '<p>about page</p>' }
const Show = { template: '<p>show page</p>' }

const routes = {
  'https://jsfiddle.net/boilerplate/vue': Home,
  '/eywraw8t/show/about': About,
  '/eywraw8t/show/show': Show
}

new Vue({
  el: '#app',
  data: {
    currentRoute: window.location.pathname
  },
  computed: {
    ViewComponent () {
      return routes[this.currentRoute] || NotFound
    }
  },
  render (h) { return h(this.ViewComponent) }
})

console.log(window.location.pathname);