Vue.js VueJS + VueRouter：有条件地禁用路由

我想知道如何有条件地禁用VueRouter中的路由，这样就不能再访问它了！

我try 用this.$router.replace('/')重定向，但URL确实显示了我想跳过的路由.

有什么 idea 吗？

EDIT:

这是我的VUEXstore :看看router.replace('/')

const store = new Vuex.Store({
  state: {
    users: [ ],
    friendships: [ ],
    userID: null
  },
  mutations: {
    signUp(state, payload) {
      auth.createUserWithEmailAndPassword(payload.email, payload.password).then((user) => {
        if (user !== null) {
          state.userID = user.uid
          router.replace('/')
        }
        else {
          state.userID = null
        }
      })
    },
    signIn(state, payload) {
      auth.signInWithEmailAndPassword(payload.email, payload.password).then((user) => {
        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) => {
        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')
    }
  }
})

这是我的组成部分:

<template>
  <div id="you">
    <h1>you</h1>
    <p>You are on your secret page!</p>
    <p>{{ $store.state.userID }}</p>
  </div>
</template>

<script>
  export default {
    name: 'you',
    beforeCreate() {
      if (this.$store.state.userID === null) {
        this.$router.replace('/signin')
      }
    }
  }
</script>