最近在使用vue时发现router-link会出现两个激活类的问题
如图:
我的路由配置如下:
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '*',
name: 'error',
component: Error
},
{
path: '/list',
name: 'list',
component: List
},
],
mode:"history",
linkActiveClass:"current_ele",
base:__dirname,
})
默认会激活 “/” 路由也就是开始访问时,首页两个字就会高亮出来,但是当我点击其他的菜单时,这两个字仍然时高亮的,即同时会出现两个高亮的菜单栏,于是我发现一个快速解决的方案以作记录:
<li>
<router-link to="/" exact>首页</router-link>
</li>
正是 exact 这个关键字帮我解决了这个。
再看vue文档:
- exact
类型: boolean
默认值: false
“是否激活” 默认类名的依据是 inclusive match (全包含匹配)。 举个例子,如果当前的路径是 /a 开头的,那么 也会被设置 CSS 类名。
按照这个规则,每个路由都会激活!想要链接使用 “exact 匹配模式”,则使用 exact 属性:
<!-- 这个链接只会在地址为 / 的时候被激活 -->
<router-link to="/" exact>
这个意思就是全包含,只有当路由地址为“/”时才会匹配到,就相当于一种严格匹配模式吧!