> Vue.js中文手册 > vue router v-link

Vue router v-link

v-link 是一个用来让用户在 vue-router 应用的不同路径间跳转的指令。该指令接受一个 javascript 表达式,并会在用户点击元素时用该表达式的值去调用 router.go

<!-- 字面量路径 -->
<a v-link="'home'">Home</a>

<!-- 效果同上 -->
<a v-link="{ path: 'home' }">Home</a>

<!-- 具名路径 -->
<a v-link="{ name: 'user', params: { userId: 123 }}">User</a>

你应该使用 v-link 而不是 href 来处理浏览时的跳转。原因如下:

  • 它在 HTML5 history 模式和 hash 模式下的工作方式相同,所以如果你决定改变模式,或者 IE9 浏览器退化为 hash 模式时,都不需要做任何改变。

  • html5 history 模式下,v-link 会监听点击事件,防止浏览器尝试重新加载页面。

  • 在 HTML5 history 模式下使用 root 选项时,不需要再 v-link 的 URL 中包含 root 路径。

链接活跃时的 class

带有 v-link 指令的元素,如果 v-link 对应的 URL 匹配当前的路径,该元素会被添加特定的 class。默认添加的 class 是 .v-link-active,而判断是否活跃使用的是包含性匹配。举例来说,一个带有指令 v-link="/a" 的元素,只要当前路径以 /a 开头,此元素即会被判断为活跃。

连接是否活跃的匹配也可以通过 exact 内联选项来设置为只有当路径完全一致时才匹配:

<a v-link="{ path: '/a', exact: true }"></a>

链接活跃时的 class 名称可以通过在创建路由器实例时指定 activeLinkClass 全局选项 来自定义,也可以通过 activeClass 内联选项来单独指定:

<a v-link="{ path: '/a', activeClass: 'custom-active-class' }"></a>

其他选项

  • replace

    一个带有 replace: true 的链接被点击时将会触发 router.replace() 而不是 router.go()。由此产生的跳转不会留下历史记录:

    <a v-link="{ path: '/abc', replace: true }"></a>
  • append

    带有 append: true 选项的相对路径链接会确保该相对路径始终添加到当前路径之后。举例来说,从 /a 跳转到相对路径 b 时,如果没有 append: true 我们会跳转到 /b,但有 append: true 则会跳转到 /a/b

    <a v-link="{ path: 'relative/path', append: true }"></a>

其他注意点

  • v-link 会自动设置 <a>href 属性。

  • 由于 v-link 是个字面量指令,它可以包含 mustache 标签,例如 v-link="/user/{% raw %}{{user.name}}{% endraw %}"
上一篇: