Vue iVew菜单不能反映路由器状态，如路由器链路

Question

从Vue的iView组件开始，在菜单组件方面有一些问题。菜单组件的工作方式与iView homepage上的描述相同，但它并不像<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

对任何提示都感到高兴。谢谢

Answer 1

已找到此问题的解决方法。

iView菜单实际上没有自动检测$route更改的可能性。接受我们为$router设置了一个监视器。我认为这不是一个好的解决方案，因为我们必须手动处理路由更改。

更容易和更灵活的是在<router-link>组件上使用iView菜单CSS类，并将linkActiveClass和linkExactActiveClass路由器属性设置为使用iview类。

然后，源代码将如下所示：

使用<router-link>组件的HTML模板

<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>组件的功能。