vue中router-link 的默认首页router激活一直存在

给导航添加active效果:
在router中添加:

new Router({
   linkActiveClass: 'active',
   mode: 'history',
   routes: [
    {
      path: '/',
      name: 'home',
      component: home
    },
    {
        path: '/news',
        name: 'news',
        component: news
    }
  ]
})

在ronter-line中添加 exact属性解决首页一直默认激活

首页

.nav-item.active{
  border-bottom: 4px solid #f68100;color: #f68100;
}

如果打开子路由出现导航active消失的问题,采用重定向方法

export default new Router({
  linkActiveClass: 'active', 
  mode: 'history',
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
        path: '/home',
      name: 'home',
      component: home
    },
    {
        path: '/news',
        name: 'news',
        component: news,
        children:[
            { path: '/news/enterprisenews', component: enterprisenews},
            { path: '/news/industryinfo', component: industryinfo}
        ]
    }
  ]
})

同时去掉exact属性

  
     {{item.navname}}

你可能感兴趣的:(vue中router-link 的默认首页router激活一直存在)