详解vue中router-link标签所必备了解的属性


Posted in Javascript onApril 15, 2019

to

表示目标路由的链接。 当被点击后,内部会立刻把 to 的值传到 router.push(),所以这个值可以是一个字符串或者是描述目标位置的对象。

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home" rel="external nofollow" >Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- 不写 v-bind 也可以,就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>

<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数,下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

replace

设置 replace 属性的话,当点击时,会调用 router.replace() 而不是 router.push(),导航后不会留下 history 记录。

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

append

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

<router-link :to="{ path: 'relative/path'}" append></router-link>

tag

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

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

<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>

active-class

设置 链接激活时使用的 CSS 类名。可以通过以下代码来替代。 

<style>
 ._active{
  background-color : red;
 }
</style>
<p>
 <router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
 <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>
注意这里 class 使用 active_class="_active"。

exact-active-class

配置当链接被精确匹配的时候应该激活的 class。可以通过以下代码来替代。

<p>
 <router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
 <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

event

声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。

<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>

以上代码设置了 event 为 mouseover ,及在鼠标移动到 Router Link 1 上时导航的 HTML 内容会发生改变。

以上所述是小编给大家介绍的vue中router-link标签所必备了解的属性详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用js调用迅雷下载代码的二种方法
Apr 15 Javascript
jquery.messager.js插件导致页面抖动的解决方法
Jul 14 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
js/jquery获取文本框输入焦点的方法
Mar 04 Javascript
JS获取复选框的值,并传递到后台的实现方法
May 30 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
Oct 30 Javascript
JS实现快递单打印功能【推荐】
Jun 21 Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 Javascript
koa2 从入门到精通(小结)
Jul 23 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
Aug 16 Javascript
关于layui的动态图标不显示的解决方法
Sep 04 Javascript
JavaScript实现前端倒计时效果
Feb 09 Javascript
详解小程序设置缓存并且不覆盖原有数据
Apr 15 #Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 #Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 #Javascript
Vuex的actions属性的具体使用
Apr 14 #Javascript
vue全局自定义指令-元素拖拽的实现代码
Apr 14 #Javascript
vue自定义指令之面板拖拽的实现
Apr 14 #Javascript
详解Vue组件之间通信的七种方式
Apr 14 #Javascript
You might like
通过ODBC连接的SQL SERVER实例
2006/10/09 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
接收键盘指令的脚本
2006/06/26 Javascript
Javascript中的变量使用说明
2010/05/18 Javascript
jQuery 定时局部刷新(setInterval)
2010/11/19 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
2011/01/19 Javascript
js弹窗返回值详解(window.open方式)
2014/01/11 Javascript
jQuery拖动元素并对元素进行重新排序
2015/12/30 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
Vue自定义属性实例分析
2019/02/23 Javascript
使用JS判断页面是首次被加载还是刷新
2019/05/26 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
用Python制作简单的钢琴程序的教程
2015/04/01 Python
tensorflow之获取tensor的shape作为max_pool的ksize实例
2020/01/04 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
英国领先的酒类网上商城:TheDrinkShop
2017/03/16 全球购物
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
预备党员党校学习自我评价分享
2013/11/12 职场文书
小学生家长评语集锦
2014/01/30 职场文书
20年同学聚会邀请函
2014/02/04 职场文书
综合素质自我评价评语
2015/03/06 职场文书
与死神共舞观后感
2015/06/15 职场文书
奠基仪式致辞
2015/07/30 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers