vue 路由高亮模式(即给页面路由名称添加样式)

港控/mmm° 2021-07-24 18:52 596阅读 0赞

路由高亮模式
    
    将当前所在路由名称包括父路由的名称变成红色
    	第一种:
    		在主入口文件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>