router-link的其他属性补充

router-link的其他属性补充

在前面< router-link >中，我们只是使用了一个属性：to，用于指定跳转的路径
< router-link >还有一些其他属性：
tag: tag可以指定< router-link >之后渲染成什么组件

<template>
  <div id="app">
    <h2>我是App组件</h2>
    <router-link to="/Home" tag="button">首页</router-link>
    <router-link to="/About" tag="button">关于</router-link>
    <router-view></router-view>
  </div>
</template>

replace: replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中

active-class： 当< router-link >对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class。
设置active-class可以修改默认的名称
在进行高亮显示的导航栏菜单或者底部tabbar时，会使用到该类
但是通常不会修改类的属性，会直接使用默认的router-link-active即可

<template>
  <div id="app">
    <h2>我是App组件</h2>
    <!--<router-link to="/Home" tag="button" replace active-class="active">首页</router-link>-->
    <!--<router-link to="/About" tag="button" replace active-class="active">关于</router-link>-->
    <!--<router-view></router-view>-->

    <router-link to="/Home" tag="button" replace >首页</router-link>
    <router-link to="/About" tag="button" replace >关于</router-link>
    <router-view></router-view>
  </div>
</template>

可以直接在标签里面修改，也可以在路由里面修改
修改 linkActiveClass

const router = new VueRouter({
  //配置路由和组件之间的应用关系
  routes,
  mode:'history',
  linkActiveClass:'active'
})