Меню Vue iVew не отражает статус маршрутизатора, как router-link - PullRequest
Новая
       19

Меню Vue iVew не отражает статус маршрутизатора, как router-link

0 голосов
/ 14 сентября 2018

Начинается с компонентов iView для Vue и возникают некоторые проблемы с компонентом меню.Компонент меню работает, как описано на домашней странице iView , за исключением того, что он не отражает реальное состояние маршрутизатора, как <router-link> делает.При вводе маршрута в адресной строке браузера соответствующий пункт меню не помечается как активный.Такое поведение происходит также при перенаправлении маршрута.

У кого-нибудь есть идеи, как с этим справиться?

Вот мой исходный шаблон с использованием пунктов меню: 

<Menu mode="horizontal" :theme="theme1" active-name="1">
  <MenuItem name="1" to="/">Home</MenuItem>
  <MenuItem name="2" to="/about">About</MenuItem>
  <MenuItem name="3" 
            v-if="!isAuthenticated" 
            @click.native="handleAuth()">Signin</MenuItem>
   <Submenu name="3" v-if="isAuthenticated">
     <MenuItem name="3-1">Profile</MenuItem>
     <MenuItem name="3-2"
               @click.native="handleLogout()">Logout</MenuItem>
   </Submenu>
</Menu>

И мойопределение роутера: 

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Notfound from './views/Notfound.vue'
import store from './store'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/notfound',
      name: 'notfound',
      component: Notfound
    }
  ]
})

router.beforeEach((to, from, next) => {
  // check if authenticated by jwt from store or localstorage
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)

  if (!to.matched.length) {
    next('/notfound')
    return
  }

  if (requiresAuth && !store.getters.isAuthenticated) {
    next({ path: '/' })
  } else {
    next()
  }
})

export default router

Будь рад любой подсказке.Спасибо

1 Ответ

0 голосов
/ 21 сентября 2018

Найден обходной путь для этой проблемы.

Меню iView фактически не имеет возможности автоматически определять изменения $ route.Примите, что мы установили наблюдателя для $ router.Думаю, что это не лучшее решение, потому что мы должны обрабатывать изменения маршрута вручную.

Гораздо проще и гибче использовать классы меню iView в компоненте <router-link> и установить linkActiveClass и linkExactActiveClassСвойство router для использования класса iview.

Тогда источник будет выглядеть следующим образом:
Шаблон HTML с <router-link> компонентом 

<nav>
  <router-link class="ivu-menu-item" to="/" exact>Root</router-link>
  <router-link class="ivu-menu-item" to="/about">About</router-link>
  <router-link class="ivu-menu-item" to="/profile">Profile</router-link>
</nav>

И определение маршрутизатора: 

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  linkActiveClass: 'ivu-menu-item-active',
  linkExactActiveClass: 'ivu-menu-item-active',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/signin',
      name: 'signin',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "signin" */ './views/Sign.vue')
    }, {
      path: '/notfound',
      name: 'notfound',
      component: Notfound
    }
  ]
})

Результат выглядит как компонент меню iView, но использует функциональность компонента <router-link>.

...