skouter/components/app.vue

<template>
<div class="panel">

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

<div>{{active}}, {{hash}}</div>

<div v-if="loading">
</div>
<div v-else-if="!loading"></div>

</div>
</template>

<script>
import SideBar from "./sidebar.vue"

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

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},
	computed: {active},
	data() {
		return {
			loading: true, user: user, hash: ''
		}
	},
	created() {
		window.onhashchange = () => this.hash = window.location.hash
	}
}
</script>