3.2.6 <router-link>
<router-link>
组件支持用户在具有路由功能的应用中单击导航。通过 to 属性可以指定目标地址,默认渲染成带有正确链接的<a>
标签,通过配置 tag 属性可以生成别的标签。另外,当目标路由成功激活时,链接元素会自动设置一个表示激活的 css 类名。下面来看一下<router-link>
语法。
语法
<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="home">首页</router-link>
<!-- 渲染结果 -->
<a href="home">首页</a>
<!-- 不写 v-bind 也可以,就像绑定其他属性一样 -->
<router-link :to="home">首页</router-link>
<!-- 同上 -->
<router-link :to="{ path: 'home'}" >首页</router-link>
<!-- 命名的路由 -->
<router-link :to="{ name:'user', params: { userId: 123 }}">用户</router-link>
<!-- 带查询参数,下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">注册</router-link>
<router-link>
的优势
分析一下为什么使用
<router-link>
而不是直接使用<a href="...">
呢?使用<router-link>
有哪些优势呢?
- 无论是 HTML5 history 模式还是 hash 模式,它们的表现行为一致,所以当切换路由模式或者在 IE9 降级使用 hash 模式时,无须作任何变动。
- 在 HTML5 history 模式下,
<router-link>
会守卫单击事件,让浏览器不再重新加载页面。- 在 HTML5 history 模式下使用 base 选项之后,所有的 to 属性都不需要写基路径。
具体通过示例 9 进行分析。单击 ad-card 模块以后,会跳转到 ticketDesc 路径下,并且把参数 id 的值传过去。其中,to 的类型:string | Location。单击后,内部会立刻把 to 的值传到
router.push()
,这个值可以是一个字符串或者是描述目标位置的对象。required 表示目标路由的链接。
示例9
<div class="ad-card"><!-- 本示例只展示<router-link>的使用 -->
<router-link :to=" { path:'/ticketDesc', query: { id: headCard.id }}">
<img :src="headcard.imgUrl" alt=""><!-- 动态绑定图片地址 -->
<div class="ad-hide">
<h3>{{ headCard.itemName }}</h3>
<p>{{ headCard.minPrice }}</p>
</div>
</router-link>
</div>