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>