VueRouter高亮一级空导航

这算是一个比较变态的需求了,最近给甲方做一个项目,有两级导航,但是一级导航是空的,也就是说一级导航是没有页面,所以也没办法去配置路由,但是在点击一级导航下的二级导航,需要把对应的一级导航高亮出来!如果不用VueRouter来做,应该效果上可以实现,但是如果用户手动的在浏览器上输入地址,没有路由的配合,导航是不会高亮的!

这时候,各种百度谷歌无解后,就只能去查官方的文档了。一段一段的过,发现了router-linkexact属性:

"是否激活" 默认类名的依据是 inclusive match (全包含匹配)。 举个例子,如果当前的路径是 /a 开头的,那么 也会被设置 CSS 类名。

既然文档这么说了,代码就这么试试:

<dl>
  <dt><router-link to="/a">一级导航</router-link></dt>
  <dd>
    <router-link to="/a/xxx">二级导航a</router-link>
    <router-link to="/a/yyy">二级导航b</router-link>
  </dd>
</dl>

路由配置里面path也要/a/xxx这样的设置,这样才可以生效。

标签: VUE

添加新评论