router-link使用详解

router-link组件的属性

to、replace、append、tag、active-class、exact、event、exact-active-class。

属性介绍

1、to（必选参数）：类型是string/location

//字符串
<router-link to="path（路径）">AAAA</router-link>

//对象
<router-link :to="{path:'路径'}">AAAA</router-link>

2、tag：类型string，它的默认值是a标签。
如果想要 渲染成某种标签，例如

• 。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。

• <router-link to='/' tag="li">跳转</router-link>
  

  这里想举个例子提醒要注意的地方，当我们想给某个标签加上路由时，因为tag默认是a标签，所以路由下的字体颜色会发生改变，如果想要恢复原来的颜色就要加样式了，那有没有其他的方式呢？这时我们就可以用到tag了，我们可以用router-link来代替要加陆游的标签，如下

  <router-link 
         	  class="item border-bottom"
         	  v-for="item of list"
         	  :key="item.id"
         	  :to="'/detail/'+item.id"
         	  tag='li'
         	  >
         			<img class="mp-like-img" :src="item.imgUrl" alt="长沙生态动物园">
         		<div class="item-info">
         			<p class="item-title">{{item.title}}</p>
         			<p class="item-desc">{{item.desc}}</p>
         			<button class="item-button">查看详情</button>
         		</div>
         	</router-link>
  

  这里原来最外层是一个li标签，但是加上路由后p标签字体颜色发生改变，此时我们就可以用路由的tag属性，将路由变为li标签，这就完美的解决这个问题。
  3、active-class 类型: string 默认值: "router-link-active"设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

   <router-link to='/'
          tag="a"
          active-class="red"
          >AAA
   </router-link>
  

  默认值通过路由的构造选项 linkActiveClass 来全局配置,如下示例：

  export default new Router({
    mode:'router',
    linkActiveClass:'is-active',
    routes: [
      {
        path:'/router',
        component:home
      }
  ]
  

  4、exact-active-class 类型: string 默认值: "router-link-exact-active"配置当链接被精确匹配的时候应该激活的 class。注意默认值也是可以通过路由构造函数选linkExactActiveClass 进行全局配置的。
  5、exact 类型: boolean 默认值: false按照这个规则，每个路由都会激活！想要链接使用 “exact 匹配模式”，则使用 exact 属性：
  6、replace 类型: boolean 默认值: false
  设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。
  7、append 类型: boolean 默认值: false 设置 append 属性后，则在当前 (相对) 路径前添加基路径