vue路由跳转后高亮问题|active class(激活状态)linkActiveClass 和 linkExactActiveClass以及exact
linkActiveClass 是模糊匹配linkExactActiveClass 是精准匹配exact也是精准的意思问题看下边图片:当css样式为#nav a.router-link-exact-active { color: #42b983; }时,如果下边没有子路由不会有什么问题,但是如果有子集路由的话,当你点击小说下边的子集路由小说就不会高亮图片如下:解决这个问题只需要改变css为#nav
·
linkActiveClass 是模糊匹配
linkExactActiveClass 是精准匹配
exact也是精准的意思
问题
看下边图片:
当css样式为#nav a.router-link-exact-active { color: #42b983; }
时,如果下边没有子路由不会有什么问题,但是如果有子集路由的话,当你点击小说
下边的子集路由小说就不会高亮
图片如下:
解决这个问题只需要改变css为#nav a.router-link-active { color: #42b983; }
对比初始的css样式少了个exact
然后把这个单词写到app.vue文件中
<div id="app">
<div id="nav">
<router-link to="/" exact>首页</router-link> |
<router-link to="/about">小说</router-link>|
<router-link to="/algin">登录</router-link>
</div>
<router-view/>
</div>
</template>
加上后出现如下效果(点击子路由的时候小说正常高亮
):
主路由的问题解决了,但是还有一个问题当点击小说时,子路由没有默认的显示
效果如下:(子路由没有默认显示的组件就是第一个页面没有显示
)
解决:(在父路由中重定向到你要默认显示的路由redirect:'/about/qihuan'
)
改完后点击小说页面出现如下效果:(点击小说直接显示默认的奇幻内容
)
更多推荐
已为社区贡献2条内容
所有评论(0)