0

从 Vue 的 iView 组件开始，菜单组件存在一些问题。菜单组件的工作方式与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

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

4

1 回答 1

0

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

iView 菜单实际上无法自动检测 $route 更改。接受我们为 $router 设置一个观察者。认为这不是一个好的解决方案，因为我们必须手动处理路由更改。

更简单、更灵活的是在<router-link>组件上使用 iView 菜单 CSS 类，并将linkActiveClass和linkExactActiveClass路由器属性设置为使用 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 Menu 组件，但使用了<router-link>组件的功能。

于 2018-09-21T11:09:20.600 回答