vue学习笔记一之<router-link>

<router-link>组件支持用户在具有路由功能中的点击导航。通过to属性指向目标地址,默认渲染成正确的a标签

1.to属性 字符串或是对象类型

点击会立刻把内部to值传送到router.push()

例:<router-link to="/Home">Home</router-link>

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

  渲染结果:<a href="Home">Home</a>

2.replace属性 布尔类型值

设置replace话,点击调用router.replace();导航就不会留下history记录

例:<router-link :to="{name:'Home'}" replace>Home</router-link>

3.append属性 布尔类型值

设置该属性后,则在当前的相对路径前加上基路径

例如,我们从 /a 导航到一个相对路径 b,如果没有配置 append,则路径为 /b,如果配了,则为 /a/b

4.tag属性字符串类型

如果想把<router-link>渲染成自定义标签,

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

渲染结果:<li>Home</li>

5.active-class属性字符串类型(默认router-link-active)

设置链接激活时使用CSS类名,默认通过linkActiveClass来全局配置

6.exact属性布尔类型值(默认false)

是否激活默认类名的依据是 inclusive match (全包含匹配)

<!-- 这个链接只有在地址为/的时候被激活 -->

<router-link to=”/” exact></router-link>

7.event属性字符串类型值或者是数组字符串

声明可以用来触发导航事件,

8.exact-active-class属性字符串类型值(默认router-link-exact-active)

配置当链接被精准匹配时候激活class,可通过linkExactActiveClass进行全局配置

原文地址:https://www.cnblogs.com/wangpengfei8313/p/8074614.html