1.active-class是哪个组件的属性，嵌套路由怎么定义

active-class：active-class是 vue-router模块中 router-link 组件中的属性，主要作用是用来实现选中样式切换的。

他在选择样式时根据路由中的（to=“/home”）后面的路径去匹配，然后显示

<router-link to="/home" class="menu-home" active-class="active">首页</router-link>

有两种使用方式：

• 直接在路由 Router 构造函数中配置 linkActiveClass 属性

export default new Router({
  linkActiveClass: 'active',
})

使用这种方式，会在每个 router-link 标签上引用这个样式(当被点击后)，如果您只想在某部分 router-link 上使用，则可以选择第二种。

• 单独在 router-link 标签上使用 active-class 属性

<router-link to="/about" active-class="active">about</router-link>

最后，为您选中的链接设置样式：

a.router-link-exact-active {
  color: pink;
}
.active {
  font-size: 16px;
  font-weight: bold;
}
​

产生的问题

由于to="/" 引起的，active-class 选择样式时会根据路由中的路径去匹配 ，例如--- （to="/"）---（to="/my"）都会被匹配到，都会激活选中样式，

<div class="menu-btn">
    <router-link to="/" class="menu-home" active-class="active">首页</router-link>
</div>
<div class="menu-btn">
    <router-link to="/my" class="menu-my" active-class="active">我的</router-link>
</div>

解决方案 在在 router-link 中写入 exact或者 在路由中加入重定向

<router-link to="/" class="menu-home" active-class="active" exact>首页</router-link>
{path: '/', redirect: '/home' }

嵌套路由说白了就是需要配置子路由，例如：

var router = new VueRouter({
  routes: [
   {
     path: '/home' ,
     component: home,
     children: [
      { path: 'loain', component: login },
      { path: 'register', component: register }
     ]
    }
  ]
})