vue router-link属性解释

发现router-link 有个tag属性,很有意思,所以整理一下,各个属性的解释。


1. “:to” 属性

相当于a标签的“href”属性,后面跟跳转链接所用。

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

<!-- 渲染结果 -->

<a href="/home">Home</a>

2.“replace”属性

   replace在router-link标签中添加后,页面切换时不会留下历史记录

    <router-link :to="/home" replace></router-link>

3.“tag”属性

具有tag属性的router-link 会被渲染成响应的标签

 <router-link :to="/home" tag="li">Home</router-link>

<!-- 渲染结果 -->

<li>Home</li>

此时页面的li同样会起到a链接跳转的结果,vue会自动为其绑定点击事件,并跳转页面。

4. “active-class” 属性

这个属性是设置激活链接时class属性,也就是当前页面所有与当前地址所匹配的链接都会被添加class属性

<router-link :to="/home" active-class="u-link--Active">Home</router-link>

active-class属性的默认值是router-link-active,所以如果没有设置,就会被渲染为这个class可以在router.js里面设置

const router =new VueRouter({

  mode: 'hash',

  linkActiveClass: 'u-link--Active',// 这是链接激活时的class})

5.“exat” 属性

开启“router-link”的严格模式

<router-link :to="/" exact>home</router-link>

上边的标签如果不加exat属性,则会在vue2.leenty.com/article页面下也会被匹配到,这却不是我们的本意,在加了这个属性后就会正确的匹配到vue2.leenty.com下

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • SPA单页应用 传统的项目大多使用多页面结构,需要切换内容的时候我们往往会进行单个html文件的跳转,这个时候受网...
    视觉派Pie阅读 11,924评论 1 55
  • <router-link> <router-link>组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 ...
    李轻舟阅读 709评论 1 3
  • 本文摘自:https://www.runoob.com/vue2/vue-routing.html <router...
    Czy_Farer阅读 255评论 0 2
  • 这里说的Vue中的路由是指前端路由,与后端路由有所区别。我们可以使用url来获取服务器的资源,而这种url与资源的...
    一颗脑袋阅读 804评论 0 0
  • 这里说的Vue中的路由是指前端路由,与后端路由有所区别。我们可以使用url来获取服务器的资源,而这种url与资源的...
    一颗脑袋阅读 613评论 0 0