vue的router-link实现的组件切换，点击切换高亮模式

注意：

1. router-link通过to属性指定目标地址， 默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签.（如 <router-link to="/about" tag="li">About</router-link> 将渲染为 <li>About</li>）。
2. 当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名(默认值是 router-link-exact-active)。
3. to="/about" 表示目标路由为about,当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。
4. Home和About是两个独立的组件

router-link默认渲染带有正确链接的a标签

	<template>
	   <div id="nav">
	      <!-- 使用了exact，表示精确匹配，即这个链接只会在地址为 / 的时候被激活，故点击它，将跳转到默认路由。 -->
	      <router-link to="/" exact>Home</router-link> |
	      <router-link to="/about">About</router-link>
	   </div>
	</template>
    <style>
		#nav a { 
		  text-decoration: none;
		}	 
		#nav a.router-link-exact-active { // 重写 当前激活状态字体 为红色 ;如果router-link中设置了tag属性，那这里的a就应换成tag的属性值，来实现样式的重写操作。
		  color: red;
		  text-decoration: underline;
	   }
	</style>

router-link通过配置 tag 属性生成别的标签

	<template>
	   <div id="nav">
	      <!-- 使用了exact，表示精确匹配，即这个链接只会在地址为 / 的时候被激活 -->
	      <router-link to="/" exact tag="li">Home</router-link> |
	      <router-link to="/about" tag="li">About</router-link>
	   </div>
	</template>
    <style>
		#nav li { 
		  text-decoration: none;
		}	 
		#nav li.router-link-exact-active { // 重写 当前激活状态字体 为红色 ;如果router-link中设置了tag属性，那这里的a就应换成tag的属性值，来实现样式的重写操作。
		  color: red;
		  text-decoration: underline;
	   }
	</style>

更过 router-link 相关知识，参考官网：https://router.vuejs.org/zh/api/#router-link-props