Как скрыть маршруты в Vue Router в зависимости от состояния? - PullRequest
Новая
       0

Как скрыть маршруты в Vue Router в зависимости от состояния?

0 голосов
/ 30 ноября 2018

Я хочу скрыть маршрут на основе условия, которое возвращает 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;
        }
    },

И я хочу повторить это для списка маршрутов.

1 Ответ

0 голосов
/ 02 декабря 2018

Если вы хотите отключить маршруты на основе каких-либо условий, вы можете использовать навигационные устройства в вашем маршрутизаторе. 

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

...