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

路由高亮模式

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