skouter/components/app.vue

<template>
<div class="panel">

<side-bar :role="user.status" :active="active">
</side-bar>

<div v-if="loading" class="page loading">
<spinner></spinner>
</div>

<home :user="user" v-else-if="active == 1" />
<new-estimate :user="user" v-else-if="active == 2" />

</div>
</template>

<script>
import SideBar from "./sidebar.vue"
import Spinner from "./spinner.vue"
import Home from "./home.vue"
import NewEstimate from "./new.vue"

const user = {
 	firstName: "test",
	lastName: "user",
	id: 12,
	status: 1,
 }

// Used to check the current section of the app generally without a regex match
// each time.
function active() {
	if (this.hash == '' || this.hash == '#') {
		return 1
	} else if (/^#new\/?/.exec(this.hash)) {
		return 2
	} else if (/^#estimates\/?/.exec(this.hash)) {
		return 3
	} else if (/^#settings\/?/.exec(this.hash)) {
		return 4
	} else if (/^#sign-out\/?/.exec(this.hash)) {
		return 5
	} else {
		return 0
	}
}

export default {
	components: { SideBar, Spinner, Home, NewEstimate },
	computed: { active },
	data() {
		return {
			loading: false, user: user, hash: window.location.hash
		}
	},
	created() {
		window.onhashchange = () => this.hash = window.location.hash
	}
}
</script>