title: VueJS + VueRouter: Conditionally Disabling A Route
body: <p>I wonder how to disable a route in VueRouter conditionally, so that it can't be accessed anymore!</p>
  
  <p>I tried to redirect with <code>this.$router.replace('/')</code> but the URL did show the route that I wanted to skip.</p>
  
  <p>Any thoughts?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>this is my VUEX-Store: Have a look at <code>router.replace('/')</code></p>
  
  <pre><code>const store = new Vuex.Store({
    state: {
      users: [ ],
      friendships: [ ],
      userID: null
    },
    mutations: {
      signUp(state, payload) {
        auth.createUserWithEmailAndPassword(payload.email, payload.password).then((user) =&gt; {
          if (user !== null) {
            state.userID = user.uid
            router.replace('/')
          }
          else {
            state.userID = null
          }
        })
      },
      signIn(state, payload) {
        auth.signInWithEmailAndPassword(payload.email, payload.password).then((user) =&gt; {
          if (user !== null) {
            state.userID = user.uid
            router.replace('/')
          }
          else {
            state.userID = null
          }
        })
      },
      signOut(state) {
        auth.signOut()
        state.userID = null
        router.replace('/signin')
      },
      authenticate(state) {
        auth.onAuthStateChanged((user) =&gt; {
          if (user !== null) {
            state.userID = user.uid
            router.replace('/')
          }
          else {
            state.userID = null
          }
        })
      }
    },
    actions: {
      signUp({ commit }) {
        commit('signUp')
      },
      signIn({ commit }) {
        commit('signIn')
      },
      signOut({ commit }) {
        commit('signOut')
      },
      authenticate({ commit }) {
        commit('authenticate')
      },
      redirect({ commit }) {
        commit('redirect')
      }
    }
  })
  </code></pre>
  
  <p>and here is my component:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="you"&gt;
      &lt;h1&gt;you&lt;/h1&gt;
      &lt;p&gt;You are on your secret page!&lt;/p&gt;
      &lt;p&gt;{{ $store.state.userID }}&lt;/p&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      name: 'you',
      beforeCreate() {
        if (this.$store.state.userID === null) {
          this.$router.replace('/signin')
        }
      }
    }
  &lt;/script&gt;
  </code></pre>