Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: chrisvfritz/vue-2.0-simple-routing-example
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: master
Choose a base ref
...
head repository: chrisvfritz/vue-2.0-simple-routing-example
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: pagejs
Choose a head ref
  • 4 commits
  • 4 files changed
  • 1 contributor

Commits on Jul 9, 2016

  1. integrate pagejs

    chrisvfritz committed Jul 9, 2016
    Copy the full SHA
    fb5ba5a View commit details
  2. Copy the full SHA
    240f8a5 View commit details

Commits on Jul 10, 2016

  1. require VLink href prop

    chrisvfritz committed Jul 10, 2016
    Copy the full SHA
    c14c978 View commit details

Commits on Sep 20, 2016

  1. Copy the full SHA
    15cbfcd View commit details
Showing with 13 additions and 25 deletions.
  1. +1 −1 README.md
  2. +1 −0 package.json
  3. +3 −14 src/components/VLink.vue
  4. +8 −10 src/main.js
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -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

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -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": {
17 changes: 3 additions & 14 deletions src/components/VLink.vue
Original file line number Diff line number Diff line change
@@ -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
}
}
}
18 changes: 8 additions & 10 deletions src/main.js
Original file line number Diff line number Diff line change
@@ -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()