Question

我想根据返回true或false的条件隐藏路由。我有一条路线清单，例如： -产品 -客户

当用户登录并且没有编辑产品的操作时，新列表将仅为： -客户。

我根据名称v-for="item in routes" v-if="item.name != 'Login"隐藏了其他路线。

对于隐藏按钮，我使用它：

AccionRegistrarProducto(){
        var userData = JSON.parse(localStorage.getItem("usuario"));
        var acciones = userData.infoUser.Acciones;
        if(acciones.some(a => a.Accion === 'Agregar Productos')){
            this.accionRegistrarProducto = true;
        }
        else{
            this.accionRegistrarProducto = false;
        }
    },

我想复制此路线列表。

Answer 1

如果要基于某些条件禁用路由，可以在路由器中使用导航保护。

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => { // this executes before entering as the name suggests.
        // you can also have this function inside a component
        // ...
      }
    }
  ]
})

在您的代码示例中，它看起来像这样

const router = new VueRouter({
  routes: [
    {
      path: '/foo', //the path you are trying to disable
      component: Foo, //the component
      beforeEnter: (to, from, next) => {
        var userData = JSON.parse(localStorage.getItem("usuario"));
        var acciones = userData.infoUser.Acciones;
        if(acciones.some(a => a.Accion === 'Agregar Productos')){
            next() // changes route
        }
        else{
            next(false) // doesn't allow changing route, you can also do redirects here etc.
        }
      }
    }
  ]
})

更多内容：https://router.vuejs.org/guide/advanced/navigation-guards.html

如何根据条件在vue路由器中隐藏路由？

1 个答案: