详解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判断url是否有效的两种方法
Mar 04 Javascript
利用函数的惰性载入提高javascript代码执行效率
May 05 Javascript
jQuery使用之设置元素样式用法实例
Jan 19 Javascript
JavaScript实现的双向跨域插件分享
Jan 31 Javascript
基于jquery实现简单的手风琴特效
Nov 24 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 Javascript
js智能获取浏览器版本UA信息的方法
Aug 08 Javascript
Ajax与服务器(JSON)通信实例代码
Nov 05 Javascript
jquery组件WebUploader文件上传用法详解
Oct 23 Javascript
vue loadmore 组件滑动加载更多源码解析
Jul 19 Javascript
详解Vue快速零配置的打包工具——parcel
Jan 16 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
php生成随机数的三种方法
2014/09/10 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
PDO::_construct讲解
2019/01/27 PHP
详解php中生成标准uuid(guid)的方法
2019/04/28 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
jQuery Ajax使用 全解析
2010/12/15 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
2013/11/19 Javascript
JS数组的赋值介绍
2014/03/10 Javascript
javascript时间函数大全
2014/06/30 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
基于Require.js使用方法(总结)
2017/10/26 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
谈谈node.js中的模块系统
2020/09/01 Javascript
OpenLayer学习之自定义测量控件
2020/09/28 Javascript
微信小程序实现左滑删除效果
2020/11/18 Javascript
实例Python处理XML文件的方法
2015/08/31 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
Python装饰器用法实例总结
2018/02/07 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
【python】matplotlib动态显示详解
2019/04/11 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
python动态规划算法实例详解
2020/11/22 Python
Sasa莎莎海外旗舰店:香港莎莎美妆平台
2018/03/21 全球购物
副总经理岗位职责范本
2015/04/08 职场文书
特此通知格式
2015/04/27 职场文书
pytorch实现线性回归以及多元回归
2021/04/11 Python