Javascript 在命名视图路由器-Vue js下仅保护一个组件

我有一个命名视图路由：

let routes = [
    {
        name: "home",
        path: '/',
        components: {
            default: Home,
            project: ProjectIndex
        }
    }
]

我想根据用户角色保护“项目”路由，但默认的主页需要任何人都可以访问

我将此添加到ProjectIndex组件中：

beforeRouteEnter (to, from, next) {

    var user = Spark.state.user;

    if(user.current_role == 'admin' || user.current_role == 'owner'){
        next();
    }

}

但是路由器也在Home组件上执行此代码，因此Home也受到此影响

我认为在Vue js中，这么简单的事情不应该如此困难

---

如果我

console.log（to）

我得到了路由，但没有任何东西告诉我将呈现哪个组件。我在这里碰壁。请帮忙

您只需检查

至
url:

beforeRouteEnter (to, from, next) {
  if(to.pathname !== '/') {
      //yours check
  }
  else {
       next();
  }
}

或者更复杂的方法是每次检查路由数组。然后可以通过组件名称进行检查

let routesObjects = routes.reduce((obj, route) => { obj[route.path] = route.name; return obj; }, {});

beforeRouteEnter (to, from, next) {
    let path = to.pathname;
    if(routesObjects.hasOwnProperty(to) && routesObjects[to] !== 'home') {
        //yours check
    }
    else {
         next();
    }
}

如果您有两个组件具有相同的
pathnam
u，则可以在每个
hook和
meta之前组合一个

在组件中设置
meta
标记

routes: [
    { name: 'home', path: '/', meta: { isHome: true } }
]

那就检查一下

router.beforeEach((to, from, next) => {
  if(to.meta.isHome !== undefined && to.meta.isHome) { next(); }
  else { //your check  }
})

您只需将
选中即可
url：

beforeRouteEnter (to, from, next) {
  if(to.pathname !== '/') {
      //yours check
  }
  else {
       next();
  }
}

或者更复杂的方法是每次检查路由数组。然后可以通过组件名称进行检查

let routesObjects = routes.reduce((obj, route) => { obj[route.path] = route.name; return obj; }, {});

beforeRouteEnter (to, from, next) {
    let path = to.pathname;
    if(routesObjects.hasOwnProperty(to) && routesObjects[to] !== 'home') {
        //yours check
    }
    else {
         next();
    }
}

如果您有两个组件具有相同的
pathnam
u，则可以在每个
hook和
meta之前组合一个

在组件中设置
meta
标记

routes: [
    { name: 'home', path: '/', meta: { isHome: true } }
]

那就检查一下

router.beforeEach((to, from, next) => {
  if(to.meta.isHome !== undefined && to.meta.isHome) { next(); }
  else { //your check  }
})

我还将向您展示如何支持惰性加载

我喜欢上面的方法。当然还有其他的方法。
如果你不喜欢上面的方法或者它不适合你的问题，你可以尝试下面的方法

假设您拥有的是vuex存储状态：

state: { user: 'admin' //or visitor } 

当用户是
admin
而不是
visitor
时，您希望显示
settings\u按钮
组件：

computed: {
  should_show_settings_button () {
    return this.$store.state.user === 'admin'
  }
}

<template v-if="should_show_settings_button">
  <router-view name="settings_button"></router-view>
</template>

计算：{
是否应显示设置按钮（）{
返回此项。$store.state.user==='admin'
}
}

我还将向您展示如何支持惰性加载

我喜欢上面的方法。当然还有其他的方法。
如果你不喜欢上面的方法或者它不适合你的问题，你可以尝试下面的方法

假设您拥有的是vuex存储状态：

state: { user: 'admin' //or visitor } 

当用户是
admin
而不是
visitor
时，您希望显示
settings\u按钮
组件：

computed: {
  should_show_settings_button () {
    return this.$store.state.user === 'admin'
  }
}

<template v-if="should_show_settings_button">
  <router-view name="settings_button"></router-view>
</template>

计算：{
是否应显示设置按钮（）{
返回此项。$store.state.user==='admin'
}
}
路径和路径是相同的，组件是不同的。@Diegoponiano那么你应该使用另一个钩子。您不能在路由之前访问
中的组件实例，这就是我的难题：使用什么钩子？我应该使用created（）还是mounted（）？别觉得这么干净：/@Diegoponiano那么在每个
之前把它和
meta
结合起来怎么样？路径和路径是相同的，组件是不同的。@Diegoponiano那么你应该使用另一个钩子。您不能在路由之前访问
中的组件实例，这就是我的难题：使用什么钩子？我应该使用created（）还是mounted（）？不要觉得这么干净：/@Diegoponiano在每个
之前将它与
meta
相结合怎么样？对于任何寻找这个的人，答案是这些是“嵌套的”命名视图，因此路由被视为相同的，v-if将条件渲染，所以我的解决方案是使用created（）hook和v-if，您甚至可以使用$router.push重定向到另一个路由。对于任何查找该路由的人，答案是这些是“嵌套”命名视图，因此该路由被视为相同的，v-if将条件渲染，因此我的解决方案是使用created（）hook和v-if，你甚至可以使用$router.push.Nice approach:）重定向到另一条路线。很高兴帮助你：）@diegoponiano我在我的答案中添加了另一种方法你可以看看。也许它更适合你的问题Nice approach:）。很高兴帮助你：）@diegoponiano我在我的答案中添加了另一种方法你可以看看。也许它更适合你的问题你的问题