diff --git a/README.md b/README.md index 2ab61c4..6a3bdf2 100644 --- a/README.md +++ b/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 diff --git a/package.json b/package.json index 399fda7..b4abc6e 100644 --- a/package.json +++ b/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": { diff --git a/src/components/VLink.vue b/src/components/VLink.vue index 21d0bbb..9a8e885 100644 --- a/src/components/VLink.vue +++ b/src/components/VLink.vue @@ -2,7 +2,6 @@ @@ -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 } } } diff --git a/src/main.js b/src/main.js index 861212b..39a79b4 100644 --- a/src/main.js +++ b/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()