router-link八种属性介绍

router-link组件的属性有：

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

1 to

<router-link :to="{name:'home',query:{kkk:'5555'}}">home页</router-link>
<router-link to="home">Home</router-link>
<router-link :to="{ path: '/home' }">Home</router-link>
<router-link :to="{name:'basic',params:{kkk:'666'}}">basic页</router-link>
<a href='home'>home</a>

2、tag

类型: string

默认值: “a”

如果想要 渲染成某种标签，例如

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

•       <router-link :to="'home'"
                     tag="li"
                     event="mouseover">Home
        </router-link>
  

  如果此时我们想要在这个li标签中添加a标签,如下所示，可以不为a标签添加href属性即可哦

   <router-link :to="{name:'Home'}" tag="li">
          <a>Home</a>
          </router-link>
  

  在这种情况下， 将作为真实的链接 (它会获得正确的 href 的)，而 “激活时的CSS类名” 则设置到外层的

• 。
  3、active-class

• 类型: string

  默认值: “router-link-active”

  设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

  4、exact-active-class

  类型: string

  默认值: “router-link-exact-active”

  配置当链接被精确匹配的时候应该激活的 class。注意默认值也是可以通过路由构造函数选项 linkExactActiveClass 进行全局配置的。

  5、exact

  类型: boolean

  默认值: false

  “是否激活” 默认类名的依据是 inclusive match (全包含匹配)。 举个例子，如果当前的路径是 /a 开头的，那么 也会被设置 CSS 类名。

  按照这个规则，每个路由都会激活！想要链接使用 “exact 匹配模式”，则使用 exact 属性：

   <li><router-link to="/">全局匹配</router-link></li>
          <li><router-link to="/" exact>严格匹配</router-link></li>
  

  简单点说，第一个的话，如果地址是/aa,或/aa/bb，……都会匹配成功，

  但加上exact，只有当地址是/时被匹配，其他都不会匹配成功

  6、event
  类型: string | Array

  默认值: ‘click’

  声明可以用来触发导航的事件。可以是一个字符串。

  <router-link to="/document" event="mouseover">document</router-link>
  

  如果我们不加event，那么默认情况下是当我们点击document的时候，跳转到相应的页面，但当我们加上event的时候，就可以改变触发导航的事件，比如鼠标移入事件

  7、replace

  类型: boolean

  默认值: false

  设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。

  8、append

  类型: boolean

  默认值: false

  设置 append 属性后，则在当前 (相对) 路径前添加基路径

  参考文章：vue router