<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>