VueJS + VueRouter：有条件地禁用路由答案

【问题标题】：VueJS + VueRouter: Conditionally Disabling A RouteVueJS + VueRouter：有条件地禁用路由
【发布时间】：2017-11-07 06:56:57
【问题描述】：

不知如何有条件地禁用VueRouter中的路由，使其无法再访问！

我尝试使用 this.$router.replace('/') 重定向，但 URL 确实显示了我想跳过的路线。

有什么想法吗？

编辑：

这是我的 VUEX 商店：看看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>

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

您可以将a meta feild 添加到您想要有条件地禁用它的路由，如下所示：

export const routes = [
  {path: '/', component: foo},
  {path: '/bar', component: bar, meta:{conditionalRoute:true}}
];

并在你的 main.js 中使用 router.beforeEach ：

router.beforeEach((to, from, next) => { 
    if (to.matched.some(record => record.meta.conditionalRoute)) { 
        // this route requires condition to be accessed
        // if not, redirect to home page. 
        if (!checkCondition) { 
            //check codition is false
            next({ path: '/'}) 
        } else { 
            //check codition is true
            next() 
        } 
    } else { 
        next() // make sure to always call next()! 
    } 
})

或者在该路由的组件上本地使用beforeRouteEnter() navigation guard

beforeRouteEnter(to, from, next){
    next(vm => { 
        // access to component instance via `vm` 
        if(checkCondition){
            next();
        }else{
            next('/');
        }
    })
}

在您的登录组件中

beforeRouteEnter(to, from, next){
    next(vm => { 
        // access to component instance via `vm` 
        if(vm.$store.state.userUID !== null){
            next('/');
        }else{
            next();
        }
    })
}

【讨论】：

感谢您的见解，但我的问题是：如何防止 URL 包含我不想输入的路径的路径名！谢谢。
@timomue URL 不采用我不想输入的路径的路径名是什么意思？
在重定向期间，url 显示了一个不应该显示的路径（仅一秒钟），vue 加载了一个我不想加载的组件，vue 应该跳过渲染该组件。
@timomue 你在哪里使用this.$router.replace('/')
当我刷新页面时，整个网站会尝试导航到“登录”（不到一秒）然后执行重定向...

【解决方案2】：

在您的路由中，您可以使用navigation guard 检查该路由是否与您要禁用的路由匹配，然后使用return 而不是执行next()

router.beforeEach(to, from, next) {
  if (to.path === "yourRoute") {
    return;
  }
}

【讨论】：