Pagejs

README.md

@@ -1,6 +1,6 @@
 # Vue 2.0 Simple Routing Example
 
-> A simple example of routing with Vue 2.0 without using vue-router.
+> A simple example of routing with Vue 2.0 without using vue-router. This branch demonstrates integration of a 3rd-party router. For an example using the raw HTML5 History API, see the [master branch](https://github.com/chrisvfritz/vue-2.0-simple-routing-example/).
 
 ## Build Setup
 

package.json

@@ -10,6 +10,7 @@
     "deploy": "surge --project . --domain vue-2-simple-routing-example.surge.sh"
   },
   "dependencies": {
+    "page": "^1.7.1",
     "vue": "^2.0.0-beta.1"
   },
   "devDependencies": {

src/components/VLink.vue

@@ -2,7 +2,6 @@
   <a
     v-bind:href="href"
     v-bind:class="{ active: isActive }"
-    v-on:click="go"
   >
     <slot></slot>
   </a>
@@ -13,22 +12,12 @@
 
   export default {
     props: {
-      href: String
+      href: String,
+      required: true
     },
     computed: {
       isActive () {
-        return this.href === this.$root.currentRoute
-      }
-    },
-    methods: {
-      go (event) {
-        event.preventDefault()
-        this.$root.currentRoute = this.href
-        window.history.pushState(
-          null,
-          routes[this.href],
-          this.href
-        )
+        return this.href === window.location.pathname
       }
     }
   }

src/main.js

@@ -1,20 +1,18 @@
 import Vue from 'vue'
+import page from 'page'
 import routes from './routes'
 
 const app = new Vue({
   el: '#app',
   data: {
-    currentRoute: window.location.pathname
+    ViewComponent: { render: h => h('div', 'loading...') }
   },
-  render (h) {
-    const matchingView = routes[this.currentRoute]
-    const ViewComponent = matchingView
-      ? require('./pages/' + matchingView + '.vue').default
-      : require('./pages/404.vue').default
-    return h(ViewComponent)
-  }
+  render (h) { return h(this.ViewComponent) }
 })
 
-window.addEventListener('popstate', () => {
-  app.currentRoute = window.location.pathname
+Object.keys(routes).forEach(route => {
+  const Component = require('./pages/' + routes[route] + '.vue')
+  page(route, () => app.ViewComponent = Component)
 })
+page('*', () => app.ViewComponent = require('./pages/404.vue'))
+page()