Ufdjrw

I have a component which is hid based on the route which is active, it kicks off a function which is stored using vuex store.

It works as intended, the sidenav is hidden on login, logout, and register.

However, I noticed when I am on an authenticated page such as admin panel, or dashboard, etc, the component displays correctly, but when/if someone reloads the webpage, the component disappears, only to be displayed when clicking a link to another page.

App.Vue

<template>
 <div id="app">
 <navbar />
 <sidenav v-show="sidenav_toggle" />
 <div class="row router-container">
 <div class="col router-row">

 <router-view/>
 </div>
 </div>
 </div>
</template>
<script>
import Vue from 'vue'
import Vuex from 'vuex'
import router from '@/router'

import axios from 'axios'
import AxiosStorage from 'axios-storage'

let sessionCache = AxiosStorage.getCache('localStorage');



import materializecss from '../static/css/main.css'
import materializejs from '../static/materialize-css/dist/js/materialize.js' 

import navbar from '@/components/navbar'
import sidenav from '@/components/sidenav'

Vue.use(Vuex)

const state = 
 sidenav:
 show: false
 


const mutations = 
 show_sidenav(state)
 state.sidenav.show = true
 ,
 hide_sidenav(state)
 state.sidenav.show = false
 


const store = new Vuex.Store(
 state,
 mutations
)



export default 
 router,
 name: 'App',
 watch:
 $route: function()
 if(this.$route.path === '/login' ,
 deep: true,
 immediate: true
 ,
 computed: 
 sidenav_toggle()
 return store.state.sidenav.show
 
 ,

 data: function()
 return
 
 ,
 components: 
 navbar,
 sidenav
 ,
 methods: 


 ,
 created: function()

 

</script>

Your watcher is not called if you land directly on the admin page because the $route property never changes (and watchers only watch for changes).

What you could do is move your watcher function in a method, and call this method in the created hook and in your watcher.

An even better way to do this would be to use vue-router navigation-guards

Example:

export default 
 // ...
 methods: 
 adaptSidebar(path) 
 if (['/login', '/logout', '/register'].includes(path)) 
 store.commit('hide_sidenav')
 else 
 store.commit('show_sidenav')
 
 ,
 ,
 beforeRouterEnter(from, to, next) 
 // As stated in the doc, we do not have access to this from here
 next(vm => 
 vm.adaptSidebar(to.path)
 )
 ,
 beforeRouteChange(from, to, next) 
 this.adaptSidebar(to.path)
 ,