vue的router-link

router-link的属性,使用

router-link的属性有:

to \replace\append\tag\active-class\exact\exact-active-class\event

1.to(string)----------------必填属性,跳转路径

2.replace(true/false)

利用 replace ,当点击时,会调用 router.replace() 而不是 router.push(),于是导航后不会留下 history 记录。

<router-link:to="{ path:'/abc'}"replace></router-link>

3.append(true/false)

设置 append 属性后,则在当前 (相对) 路径前添加基路径。例如,我们从 /a 导航到一个相对路径 b,如果没有配置 append,则路径为 /b,如果配了,则为 /a/b

4.tag(string)

有时候想要 渲染成某种标签,例如

。 于是我们使用 tag prop 类指定何种标签,同样它还是会监听点击,触发导航。

5.active-class(string)

设置链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

<router-linkto="/productService"active-class="active">产品服务</router-link>

1

全局配置:

constcreateRouter=()=>newRouter({mode:'history',// require service supportlinkActiveClass:'is-active',scrollBehavior:()=>({y:0}),routes:constantRoutes})

1

2

3

4

5

6

6.exact(true/false)

“是否激活”默认类名的依据是包含匹配。 举个例子,如果当前的路径是 /a 开头的,那么 也会被设置 CSS 类名。

按照这个规则,每个路由都会激活 <router-link to="/">!一般项目首页都是path:‘/’,这样就是点击别的页面首页也会高亮,想要链接使用“精确匹配模式”,则使用 exact 属性:一般会配合*exact-active-class*使用

<span><router-linkto="/"exact-active-class="activeIndex":exact="true">首页</router-link></span><span><router-linkto="/productService"active-class="active">产品服务</router-link></span><span><router-linkto="/industryConsulting"active-class="active">行业资讯</router-link></span><span><router-linkto="/aboutUs"active-class="active">关于我们</router-link></span>

1

2

3

4

5

6

7

8

9

10

11

12

7.exact-active-class

配置当链接被精确匹配的时候应该激活的 class。注意默认值也是可以通过路由构造函数选项 linkExactActiveClass 进行全局配置的。

参考文章:VUE API

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • <router-link>组件支持用户在具有路由功能的应用中(点击导航)。通过 to 属性指定目标地址,默认渲染成...
    九瀺阅读 284评论 0 0
  • to: 表示目标路由的链接。 当被点击后,内部会立刻把 to 的值传到 router.push(),所以这个值可以...
    张思学阅读 2,374评论 0 0
  • <router-link>组件支持用户在具有路由功能的应用中点击导航。通过to属性指定目标地址,默认渲染为带有正确...
    少甜的草莓牛奶阅读 699评论 0 0
  • 发现router-link 有个tag属性,很有意思,所以整理一下,各个属性的解释。 1. “:to” 属性 相当...
    c6e71129966d阅读 2,851评论 1 0
  • <router-link><router-link> 组件支持用户在具有路由功能的应用中(点击)导航。 通过 to...
    乖乖果效36阅读 1,779评论 0 1

友情链接更多精彩内容