admin管理员组文章数量:1633921
路由高亮模式
将当前所在路由名称包括父路由的名称变成红色
第一种:
在主入口文件App.vue的style中设置
.router-link-active{
color:red;
}
第二种:
1、在总路由js文件中,和routes同级
linkActiveClass:'xx',
2、在主入口文件App.vue的style中设置
.xx{
color:red;
}
第三种(能自定义未选中字体样式且不影响选中字体样式)
直接给.active或.router-link-exact-active/.router-link-active或自定义类添加样式,但是都得使用!important提高权重,样式才会生效
将当前所在路由名称变成红色,不改变父路由路径的颜色
第一种:
在主入口文件App.vue的style中设置
.router-link-exact-active{
color:red;
}
第二种:
1、在总路由js文件中,和routes同级
linkExactActiveClass:'xx',
2、在主入口文件App.vue的style中设置
.xx{
color:red;
}
代码示例:
总路由js文件:
import Vue from 'vue'
import VueRouter from 'vue-router'
import HelloWorld from '../components/HelloWorld'
import C from '../components/C'
import D from '../components/D'
import A from '../components/A'
import B from '../components/B'
import N from '../components/404'
Vue.use(VueRouter)
export default new VueRouter({
//linkActiveClass:'active',
linkExactActiveClass:'active2',
routes:[
{path:'/',redirect:'/d'},
{path:'*',component:N},
{
path:'/hello',
name:"HelloWorld",
component:HelloWorld
},
{
path:'/c',
name:'c',
component:C,
children:[
{
path:'cc',
component:A,
children:[
{
path:'ccc',
component:A
}
]
}
]
},
{
path:'/d',
name:'d',
component:D,
children:[{
path:"dd",
component:B
}]
}
]
})
总入口App.vue文件:
<template>
<div id="app">
<img src="./assets/logo.png">
<ul>
<router-link :to="{name:'d',params:{name:msg}}">d</router-link>
<router-link to='/c'>c</router-link>
</ul>
<button @click='back'>点击跳转首页</button>
<router-view />
</div>
</template>
<script>
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
/*.active{
color:red;
}*/
/*.router-link-exact-active{
color:red;
}*/
.active2{
color:green;
}
</style>
版权声明:本文标题:vue 路由高亮模式(即给页面路由名称添加样式) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1729177470a1188898.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论