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

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

我尝试用

this.$router.replace（'/'）

重定向，但URL确实显示了我想要跳过的路由

有什么想法吗

编辑：

这是我的VUEX应用商店：看看

router.replace（'/'）

这是我的组成部分：

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

你
你在你的秘密页上

{{$store.state.userID}

导出默认值{
名字：“你”，
beforeCreate（）{
if（this.$store.state.userID==null）{
此.$router.replace（“/signin”）
}
}
}

您可以添加到要有条件禁用的路由，如下所示：

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

并在main.js中使用

router.beforeach

：

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

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();
        }
    })
}  

在你的签名部分

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();
        }
    })
}  

---

在路由中，可以使用检查路由是否与要禁用的路由匹配，然后

返回

，而不是执行

next（）

---

感谢您提供的见解，但我的问题是：如何防止URL采用我不想输入的路由的路径名！谢谢。@timomue URL不采用我不想输入的路由的路径名是什么意思？在重定向过程中，URL显示一个不应该显示的路径（仅一秒钟），vue加载一个组件，我不想加载，vue应该跳过呈现该组件。@timomue您在哪里使用

this.$router.replace（'/'））

当我刷新页面时，整个站点都会尝试导航到“登录”（仅几秒钟），然后执行重定向。。。