标签：单击 模式 3.2 首页 link router 路由

<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>

标签：单击,模式,3.2,首页,link,router,路由
来源： https://www.cnblogs.com/Huang-zihan/p/16366925.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。