vue-路由导航高亮

1、什么是高亮

----网页中通过样式设置，让一系列元素中的某个元素突出显示

 

2、路由导航高亮

①默认高亮

        vueRouter提供了一个高亮class名称：.router-link-active,可以让导航链接自动实现样式差异

ul li a{
  text-decoration: none;
  margin: 5px;
}
ul li a.router-link-active{
  color: blue;
  font-weight: bolder;
}

②自定义高亮名称

// 4、创建路由对象
const router = new VueRouter({
    routes,
    mode: 'hash',
    // mode: 'history', // 常规模式，链接地址中不带#符号
    // base: '/pro01router/dist/',
    linkActiveClass: "active"       // 自定义高亮名称，导航高亮的样式名称：.active
})

ul li a{
  text-decoration: none;
  margin: 5px;
}
ul li a.active{
  color: blue;
  font-weight: bolder;
}